freeCodeCamp/curriculum/challenges/spanish/03-front-end-libraries/react/use-react-to-render-nested-components.spanish.md

id, title, challengeType, isRequired, videoUrl, localeTitle

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036165	Use React to Render Nested Components	6	false		Use React para renderizar componentes anidados

Description

El último desafío mostró una forma sencilla de componer dos componentes, pero hay muchas formas diferentes de componer componentes con React. La composición de componentes es una de las características poderosas de React. Cuando trabaja con React, es importante comenzar a pensar en su interfaz de usuario en términos de componentes como el ejemplo de la aplicación en el último desafío. Rompes tu interfaz de usuario en sus bloques de construcción básicos, y esas piezas se convierten en componentes. Esto ayuda a separar el código responsable de la IU del código responsable de manejar la lógica de la aplicación. Puede simplificar enormemente el desarrollo y mantenimiento de proyectos complejos.

Instructions

Hay dos componentes funcionales definidos en el editor de código, llamados TypesOfFruit y Fruits . Tome el TypesOfFruit componentes y componerlos, o un nido que, dentro de la Fruits componente. Luego tome el componente Fruits y TypesOfFood dentro del componente TypesOfFood . El resultado debe ser un componente hijo, anidado dentro de un componente padre, que está anidado dentro de un componente padre propio.

Tests

tests:
  - text: El componente <code>TypesOfFood</code> debe devolver un único elemento <code>div</code> .
    testString: 'assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === "div", "The <code>TypesOfFood</code> component should return a single <code>div</code> element.");'
  - text: El componente <code>TypesOfFood</code> debe devolver el componente <code>Fruits</code> .
    testString: 'assert(Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type.name === "Fruits", "The <code>TypesOfFood</code> component should return the <code>Fruits</code> component.");'
  - text: El componente <code>Fruits</code> debe devolver el componente <code>TypesOfFruit</code> .
    testString: 'assert(Enzyme.mount(React.createElement(TypesOfFood)).find("h2").html() === "<h2>Fruits:</h2>", "The <code>Fruits</code> component should return the <code>TypesOfFruit</code> component.");'
  - text: El componente <code>TypesOfFruit</code> debe devolver los elementos <code>h2</code> y <code>ul</code> .
    testString: 'assert(Enzyme.mount(React.createElement(TypesOfFood)).find("ul").text() === "ApplesBlueberriesStrawberriesBananas", "The <code>TypesOfFruit</code> component should return the <code>h2</code> and <code>ul</code> elements.");'

Challenge Seed

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <ul>
        <li>Apples</li>
        <li>Blueberries</li>
        <li>Strawberries</li>
        <li>Bananas</li>
      </ul>
    </div>
  );
};

const Fruits = () => {
  return (
    <div>
      { /* change code below this line */ }

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

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

  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        { /* change code below this line */ }

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

After Test

console.info('after the test');

Solution

// solution required