freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/pass-props-to-a-stateless-functional-component.spanish.md

id	title	localeTitle	challengeType	isRequired
5a24c314108439a4d4036169	Pass Props to a Stateless Functional Component	Pase los apoyos a un componente funcional sin estado	6	false

Description

Los desafíos anteriores cubrieron mucho la creación y composición de elementos JSX, componentes funcionales y componentes de clase de estilo ES6 en React. Con esta base, es hora de ver otra característica muy común en React: props . En React, puede pasar accesorios o propiedades a componentes secundarios. Supongamos que tiene un componente de la App que representa un componente secundario llamado Welcome que es un componente funcional sin estado. Puedes pasar user propiedad de Welcome un user escribiendo:

<App>
  <Welcome user='Mark' />
</App>

Utiliza los atributos HTML personalizados que React proporciona soporte para pasar el user la propiedad al componente Welcome . Ya que Welcome es un componente funcional sin estado, tiene acceso a este valor así:

const Welcome = (props) => <h1>Hello, {props.user}!</h1>

Es estándar llamar a este valor props y cuando se trata de componentes funcionales sin estado, básicamente lo considera como un argumento de una función que devuelve JSX. Puede acceder al valor del argumento en el cuerpo de la función. Con los componentes de clase, verás que esto es un poco diferente.

Instructions

Hay componentes de Calendar y CurrentDate en el editor de código. Al representar CurrentDate desde el componente Calendar , pase una propiedad de date asignada a la fecha actual desde el objeto Date de JavaScript. Luego acceda a este prop en el componente CurrentDate , mostrando su valor dentro de las etiquetas p . Tenga en cuenta que para que prop valores prop sean evaluados como JavaScript, deben estar encerrados entre paréntesis, por ejemplo date={Date()} .

Tests

tests:
  - text: El componente <code>Calendar</code> debe devolver un único elemento <code>div</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().type() === "div"; })(), "The <code>Calendar</code> component should return a single <code>div</code> element.");'
  - text: El segundo elemento secundario del componente <code>Calendar</code> debe ser el componente <code>CurrentDate</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).name() === "CurrentDate"; })(), "The second child of the <code>Calendar</code> component should be the <code>CurrentDate</code> component.");'
  - text: El componente <code>CurrentDate</code> debe tener una prop llamada <code>date</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.children().childAt(1).props().date })(), "The <code>CurrentDate</code> component should have a prop called <code>date</code>.");'
  - text: La <code>date</code> prop. Del <code>CurrentDate</code> debe contener una cadena de texto.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); const prop = mockedComponent.children().childAt(1).props().date; return( typeof prop === "string" && prop.length > 0 ); })(), "The <code>date</code> prop of the <code>CurrentDate</code> should contain a string of text.");'
  - text: El componente <code>CurrentDate</code> debe representar el valor de la <code>date</code> prop en la etiqueta <code>p</code> .
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Calendar)); return mockedComponent.find("p").html().includes(Date().substr(3)); })(), "The <code>CurrentDate</code> component should render the value from the <code>date</code> prop in the <code>p</code> tag.");'

Challenge Seed

const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: </p>
      { /* change code above this line */ }
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        { /* change code below this line */ }
        <CurrentDate />
        { /* change code above this line */ }
      </div>
    );
  }
};

After Test

console.info('after the test');

Solution

const CurrentDate = (props) => {
  return (
    <div>
      { /* change code below this line */ }
      <p>The current date is: {props.date}</p>
      { /* change code above this line */ }
    </div>
  );
};

class Calendar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h3>What date is it?</h3>
        { /* change code below this line */ }
        <CurrentDate date={Date()} />
        { /* change code above this line */ }
      </div>
    );
  }
};