props
) a los componentes hijo. Pero, ¿qué sucede si el componente hijo al que se le está pasando una propiedad es un class component, en lugar de un componente funcional sin estado? El class component utiliza una convención ligeramente diferente para acceder a props
. Cada vez que refiera a un class component dentro de sí mismo, use la palabra clave this
. Para acceder a props
dentro de un class component, se precede el código que se utiliza para acceder a ella con this
. Por ejemplo, si un class component tiene una propiedad llamada data
, escribir {this.props.data}
en JSX. this
. Para acceder a las propiedades (props) dentro de un componente de clase, precede el código que se utiliza para acceder a ella con this
. Por ejemplo, si un componente de clase ES6 tiene una propiedad llamada data
, escribe {this.props.data}
en JSX. ReturnTempPassword
en el componente padre ResetPassword
. Aquí, mandar a ReturnTempPassword
un prop de tempPassword
y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del hijo, ReturnTempPassword
, acceda a la propiedad tempPassword
dentro de las etiquetas strong
para asegurarse de que el usuario vea la contraseña temporal. ReturnTempPassword
en el componente principal ResetPassword
. Aquí, añade una propiedad (prop) tempPassword
al componente ReturnTempPassword
y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del componente hijo, ReturnTempPassword
, acceda a la propiedad tempPassword
dentro de las etiquetas strong
para asegurarse de que el usuario vea la contraseña temporal. ResetPassword
debe devolver un único elemento div
.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "The ResetPassword
component should return a single div
element.");'
- - text: El cuarto hijo de ResetPassword
debe ser el componente ReturnTempPassword
.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "The fourth child of ResetPassword
should be the ReturnTempPassword
component.");'
- - text: El componente ReturnTempPassword
debe tener un prop llamado tempPassword
.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The ReturnTempPassword
component should have a prop called tempPassword
.");'
+ - text: El componente ResetPassword
debe devolver un único elemento div
.
+ testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "El componente ResetPassword
debe devolver un único elemento div
.");'
+ - text: El cuarto hijo de ResetPassword
debe ser el componente ReturnTempPassword
.
+ testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "El cuarto hijo de ResetPassword
debe ser el componente ReturnTempPassword
.");'
+ - text: El componente ReturnTempPassword
debe tener un prop llamado tempPassword
.
+ testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "El componente ReturnTempPassword
debe tener un prop llamado tempPassword
.");'
- text: El prop tempPassword
de ReturnTempPassword
debe ser igual a una cadena de al menos 8
caracteres.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find("ReturnTempPassword").props().tempPassword; return typeof temp === "string" && temp.length >= 8; })(), "The tempPassword
prop of ReturnTempPassword
should be equal to a string of at least 8
characters.");'
- - text: El componente ReturnTempPassword
debe mostrar la contraseña que crea como el prop tempPassword
dentro de strong
etiquetas strong
.
- testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The ReturnTempPassword
component should display the password you create as the tempPassword
prop within strong
tags.");'
+ testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); const temp = mockedComponent.find("ReturnTempPassword").props().tempPassword; return typeof temp === "string" && temp.length >= 8; })(), "El prop tempPassword
de ReturnTempPassword
debe ser igual a una cadena de al menos 8
caracteres.");'
+ - text: El componente ReturnTempPassword
debe mostrar la contraseña que crea como el prop tempPassword
dentro de strong
etiquetas strong
.
+ testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "El componente ReturnTempPassword
debe mostrar la contraseña que crea como el prop tempPassword
dentro de strong
etiquetas strong
.");'
```
@@ -47,9 +47,9 @@ class ReturnTempPassword extends React.Component {
render() {
return (
Tu contraseña temporal es:
- { /* cambia el código arriba de esta línea */ } + { /* change code below this line */ } +Your temporary password is:
+ { /* change code above this line */ }Your temporary password is: {this.props.tempPassword}
+