freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/pass-state-as-props-to-child-components.spanish.md

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d403617a	Pass State as Props to Child Components	6	false		Pasar estado como accesorios a componentes secundarios

Description

Vio muchos ejemplos que pasaron apoyos a elementos JSX secundarios y componentes React secundarios en desafíos anteriores. Quizás te preguntes de dónde provienen esos accesorios. Un patrón común es tener un componente con estado que contenga el state importante para su aplicación, que luego presente componentes secundarios. Desea que estos componentes tengan acceso a algunas partes de ese state , que se pasan como accesorios. Por ejemplo, tal vez tenga un componente de la App que presente una Navbar , entre otros componentes. En su App , tiene un state que contiene mucha información de usuario, pero la Navbar solo necesita acceso al nombre de usuario del usuario para poder mostrarla. Navbar esa pieza de state al componente Navbar como prop. Este patrón ilustra algunos paradigmas importantes en React. El primero es el flujo de datos unidireccional . El estado fluye en una dirección en el árbol de los componentes de la aplicación, desde el componente primario con estado hasta los componentes secundarios. Los componentes secundarios solo reciben los datos de estado que necesitan. La segunda es que las aplicaciones con estado complejas pueden dividirse en solo unos pocos, o tal vez un solo componente con estado. El resto de sus componentes simplemente reciben el estado del padre como apoyo y representan una IU desde ese estado. Comienza a crear una separación donde la administración del estado se maneja en una parte del código y la representación de la interfaz de usuario en otra. Este principio de separar la lógica de estado de la lógica de UI es uno de los principios clave de React. Cuando se usa correctamente, hace que el diseño de aplicaciones complejas y con estado sea mucho más fácil de administrar.

Instructions

El componente MyApp tiene estado y representa un componente de la Navbar como un elemento secundario. Pase la propiedad del name en su state hasta el componente secundario, luego muestre el name en la etiqueta h1 que forma parte del método de renderizado de la Navbar de Navbar .

Tests

tests:
  - text: El componente <code>MyApp</code> debe renderizarse con un componente <code>Navbar</code> dentro.
    testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(MyApp)); return mockedComponent.find("MyApp").length === 1 && mockedComponent.find("Navbar").length === 1; })(), "The <code>MyApp</code> component should render with a <code>Navbar</code> component inside.");'
  - text: El componente <code>Navbar</code> debe recibir el <code>name</code> propiedad de estado <code>MyApp</code> como props.
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").props() )}; const navProps = await setState(); assert(navProps.name === "TestName", "The <code>Navbar</code> component should receive the <code>MyApp</code> state property <code>name</code> as props."); }; '
  - text: El elemento <code>h1</code> en la <code>Navbar</code> de <code>Navbar</code> debe representar el <code>name</code> prop.
    testString: 'async () => { const waitForIt = (fn) => new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250)); const mockedComponent = Enzyme.mount(React.createElement(MyApp)); const navH1Before = mockedComponent.find("Navbar").find("h1").text(); const setState = () => { mockedComponent.setState({name: "TestName"}); return waitForIt(() => mockedComponent.find("Navbar").find("h1").text() )}; const navH1After = await setState(); assert(new RegExp("TestName").test(navH1After) && navH1After !== navH1Before, "The <code>h1</code> element in <code>Navbar</code> should render the <code>name</code> prop."); }; '

Challenge Seed

class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'CamperBot'
    }
  }
  render() {
    return (
       <div>
         <Navbar /* your code here */ />
       </div>
    );
  }
};

class Navbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
    <div>
      <h1>Hello, my name is: /* your code here */ </h1>
    </div>
    );
  }
};

After Test

console.info('after the test');

Solution

// solution required