freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/access-props-using-this.props.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403616e	Access Props Using this.props	6	false		Acceder a los props usando this.props

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 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.

Instructions

Renderiza una instancia del componente 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.

Tests

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"; })(), "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; })(), "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>.");'

Challenge Seed

class ReturnTempPassword extends React.Component {
  constructor(props) {
    super(props);

  }
  render() {
    return (
        <div>
            { /* change code below this line */ }
            <p>Your temporary password is: <strong></strong></p>
            { /* change code above this line */ }
        </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 */ }

          { /* change code above this line */ }
        </div>
    );
  }
};

After Test

console.info('después de la prueba');

Solution

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>
    );
  }
};