Translation improvements for description and instructions + translation of the challenge seed (#19435)
This commit is contained in:
Lucas Arvelo
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
65686b44e5
commit
726f556e9f
@ -8,26 +8,26 @@ localeTitle: Acceder a los props usando this.props
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Los últimos desafíos cubrieron las formas básicas de pasar propiedades (<code>props</code>) a los componentes hijo. Pero, ¿qué sucede si el componente hijo al que se le está pasando una propiedad es un <em>class component</em>, en lugar de un componente funcional sin estado? El <em>class component</em> utiliza una convención ligeramente diferente para acceder a <code>props</code>. Cada vez que refiera a un <em>class component</em> dentro de sí mismo, use la palabra clave <code>this</code>. Para acceder a <code>props</code> dentro de un class component, se precede el código que se utiliza para acceder a ella con <code>this</code> . Por ejemplo, si un <em>class component</em> tiene una propiedad llamada <code>data</code> , escribir <code>{this.props.data}</code> en JSX. </section>
|
||||
<section id="description"> Los últimos desafíos cubrieron las formas básicas de pasar propiedades (props) a los componentes secundarios. Pero, ¿qué sucede si el componente secundario al que le está pasando una propiedad (prop) es un componente de clase ES6, en lugar de un componente funcional sin estado? El componente de clase ES6 utiliza una convención ligeramente diferente para acceder a las propiedades (props). Cada vez que se refiera a un componente de clase dentro de sí mismo, use la palabra clave <code>this</code>. Para acceder a las propiedades (props) dentro de un componente de clase, precede el código que se utiliza para acceder a ella con <code>this</code>. Por ejemplo, si un componente de clase ES6 tiene una propiedad llamada <code>data</code> , escribe <code>{this.props.data}</code> en JSX. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Renderice una instancia del componente <code>ReturnTempPassword</code> en el componente padre <code>ResetPassword</code> . Aquí, mandar a <code>ReturnTempPassword</code> un prop de <code>tempPassword</code> y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del hijo, <code>ReturnTempPassword</code> , acceda a la propiedad <code>tempPassword</code> dentro de las etiquetas <code>strong</code> para asegurarse de que el usuario vea la contraseña temporal. </section>
|
||||
<section id="instructions"> Renderiza una instancia del componente <code>ReturnTempPassword</code> en el componente principal <code>ResetPassword</code> . Aquí, añade una propiedad (prop) <code>tempPassword</code> al componente <code>ReturnTempPassword</code> y asígnele un valor de una cadena que tenga al menos 8 caracteres de longitud. Dentro del componente hijo, <code>ReturnTempPassword</code> , acceda a la propiedad <code>tempPassword</code> dentro de las etiquetas <code>strong</code> para asegurarse de que el usuario vea la contraseña temporal. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: El componente <code>ResetPassword</code> debe devolver un único elemento <code>div</code> .
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "The <code>ResetPassword</code> component should return a single <code>div</code> element.");'
|
||||
- text: El cuarto hijo de <code>ResetPassword</code> debe ser el componente <code>ReturnTempPassword</code> .
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "The fourth child of <code>ResetPassword</code> should be the <code>ReturnTempPassword</code> component.");'
|
||||
- text: El componente <code>ReturnTempPassword</code> debe tener un prop llamado <code>tempPassword</code> .
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The <code>ReturnTempPassword</code> component should have a prop called <code>tempPassword</code>.");'
|
||||
- text: El componente <code>ResetPassword</code> debe devolver un único elemento <code>div</code>.
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().type() === "div"; })(), "El componente <code>ResetPassword</code> debe devolver un único elemento <code>div</code>.");'
|
||||
- text: El cuarto hijo de <code>ResetPassword</code> debe ser el componente <code>ReturnTempPassword</code>.
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.children().childAt(3).name() === "ReturnTempPassword"; })(), "El cuarto hijo de <code>ResetPassword</code> debe ser el componente <code>ReturnTempPassword</code>.");'
|
||||
- text: El componente <code>ReturnTempPassword</code> debe tener un prop llamado <code>tempPassword</code>.
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "El componente <code>ReturnTempPassword</code> debe tener un prop llamado <code>tempPassword</code>.");'
|
||||
- text: El prop <code>tempPassword</code> de <code>ReturnTempPassword</code> debe ser igual a una cadena de al menos <code>8</code> 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 <code>tempPassword</code> prop of <code>ReturnTempPassword</code> should be equal to a string of at least <code>8</code> characters.");'
|
||||
- text: El componente <code>ReturnTempPassword</code> debe mostrar la contraseña que crea como el prop <code>tempPassword</code> dentro de <code>strong</code> etiquetas <code>strong</code> .
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "The <code>ReturnTempPassword</code> component should display the password you create as the <code>tempPassword</code> prop within <code>strong</code> 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 <code>tempPassword</code> de <code>ReturnTempPassword</code> debe ser igual a una cadena de al menos <code>8</code> caracteres.");'
|
||||
- text: El componente <code>ReturnTempPassword</code> debe mostrar la contraseña que crea como el prop <code>tempPassword</code> dentro de <code>strong</code> etiquetas <code>strong</code>.
|
||||
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(ResetPassword)); return mockedComponent.find("strong").text() === mockedComponent.find("ReturnTempPassword").props().tempPassword; })(), "El componente <code>ReturnTempPassword</code> debe mostrar la contraseña que crea como el prop <code>tempPassword</code> dentro de <code>strong</code> etiquetas <code>strong</code>.");'
|
||||
|
||||
```
|
||||
|
||||
@ -47,9 +47,9 @@ class ReturnTempPassword extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{ /* cambia el código debajo de esta línea */ }
|
||||
<p>Tu contraseña temporal es: <strong></strong></p>
|
||||
{ /* cambia el código arriba de esta línea */ }
|
||||
{ /* change code below this line */ }
|
||||
<p>Your temporary password is: <strong></strong></p>
|
||||
{ /* change code above this line */ }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -63,12 +63,12 @@ class ResetPassword extends React.Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Cambiar Contraseña</h2>
|
||||
<h3>Te hemos generado una contraseña temporal.</h3>
|
||||
<h3>Por favor cambia pronto está contraseña desde las opciones de tu cuenta .</h3>
|
||||
{ /* cambia el código debajo de esta línea */ }
|
||||
<h2>Reset Password</h2>
|
||||
<h3>We've generated a new temporary password for you.</h3>
|
||||
<h3>Please reset this password from your account settings ASAP.</h3>
|
||||
{ /* change code below this line */ }
|
||||
|
||||
{ /* cambia el código arriba de esta línea */ }
|
||||
{ /* change code above this line */ }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -94,6 +94,37 @@ console.info('después de la prueba');
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solución requerida
|
||||
class ReturnTempPassword extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
class ResetPassword extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Reset Password</h2>
|
||||
<h3>We've generated a new temporary password for you.</h3>
|
||||
<h3>Please reset this password from your account settings ASAP.</h3>
|
||||
{ /* change code below this line */ }
|
||||
<ReturnTempPassword tempPassword="serrPbqrPnzc" />
|
||||
{ /* change code above this line */ }
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
```
|
||||
</section>
|
||||
</section>
|
||||
Reference in New Issue
Block a user