Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprende Desafío: Mostrar Colecciones de Datos en React | Fundamentos de React y UI Basada en Componentes
Dominio de React

bookDesafío: Mostrar Colecciones de Datos en React

Tarea: Mostrar una lista de productos

Gestionar los datos obtenidos del backend y asegurar su correcta visualización en formato de lista.

La tarea es:

  • Utilizar el método map() para renderizar un arreglo de productos.
  • Asegurarse de completar los siguientes puntos:
  1. h2 debe contener el nombre del producto (name);
  2. p debe contener la descripción del producto (description);
  3. span debe contener la cadena "Price:" y el precio del producto (price).
  1. Utilizar el método map() para iterar sobre el arreglo props.goods.
  2. Asegurarse de establecer la propiedad key del elemento <li> con un valor único, como la propiedad id del elemento.
  3. Dentro de cada elemento <li>, utilizar los siguientes elementos:
    • Un elemento <h2> para mostrar el nombre del producto. Acceder al nombre desde el item actual;
    • Un elemento <p> para mostrar la descripción del producto. Acceder a la descripción desde el item actual;
    • Un elemento <span> para mostrar la cadena "Price:" seguida del precio del producto. Acceder al precio desde el item actual.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 15

Pregunte a AI

expand

Pregunte a AI

ChatGPT

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how to use the map() method in this context?

What should I do if some goods are missing a description or price?

Can you show an example of how the rendered list should look?

Awesome!

Completion rate improved to 2.17

bookDesafío: Mostrar Colecciones de Datos en React

Desliza para mostrar el menú

Tarea: Mostrar una lista de productos

Gestionar los datos obtenidos del backend y asegurar su correcta visualización en formato de lista.

La tarea es:

  • Utilizar el método map() para renderizar un arreglo de productos.
  • Asegurarse de completar los siguientes puntos:
  1. h2 debe contener el nombre del producto (name);
  2. p debe contener la descripción del producto (description);
  3. span debe contener la cadena "Price:" y el precio del producto (price).
  1. Utilizar el método map() para iterar sobre el arreglo props.goods.
  2. Asegurarse de establecer la propiedad key del elemento <li> con un valor único, como la propiedad id del elemento.
  3. Dentro de cada elemento <li>, utilizar los siguientes elementos:
    • Un elemento <h2> para mostrar el nombre del producto. Acceder al nombre desde el item actual;
    • Un elemento <p> para mostrar la descripción del producto. Acceder a la descripción desde el item actual;
    • Un elemento <span> para mostrar la cadena "Price:" seguida del precio del producto. Acceder al precio desde el item actual.

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 1. Capítulo 15
some-alt