Desafí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:
h2debe contener el nombre del producto (name);pdebe contener la descripción del producto (description);spandebe contener la cadena "Price:" y el precio del producto (price).
- Utilizar el método
map()para iterar sobre el arregloprops.goods. - Asegurarse de establecer la propiedad
keydel elemento<li>con un valor único, como la propiedad id del elemento. - Dentro de cada elemento
<li>, utilizar los siguientes elementos:- Un elemento
<h2>para mostrar el nombre del producto. Acceder al nombre desde elitemactual; - Un elemento
<p>para mostrar la descripción del producto. Acceder a la descripción desde elitemactual; - Un elemento
<span>para mostrar la cadena "Price:" seguida del precio del producto. Acceder al precio desde elitemactual.
- Un elemento
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 1. Capítulo 15
Pregunte a AI
Pregunte a AI
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
Desafí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:
h2debe contener el nombre del producto (name);pdebe contener la descripción del producto (description);spandebe contener la cadena "Price:" y el precio del producto (price).
- Utilizar el método
map()para iterar sobre el arregloprops.goods. - Asegurarse de establecer la propiedad
keydel elemento<li>con un valor único, como la propiedad id del elemento. - Dentro de cada elemento
<li>, utilizar los siguientes elementos:- Un elemento
<h2>para mostrar el nombre del producto. Acceder al nombre desde elitemactual; - Un elemento
<p>para mostrar la descripción del producto. Acceder a la descripción desde elitemactual; - Un elemento
<span>para mostrar la cadena "Price:" seguida del precio del producto. Acceder al precio desde elitemactual.
- Un elemento
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 1. Capítulo 15