Desafío: Mostrar Colecciones de Datos
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 (propiedadname);pdebe contener la descripción del producto (propiedaddescription);spandebe contener la cadena "Price:" y el precio del producto (propiedadprice).
- 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 2. Capítulo 7
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Genial!
Completion tasa mejorada a 4
Desafío: Mostrar Colecciones de Datos
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 (propiedadname);pdebe contener la descripción del producto (propiedaddescription);spandebe contener la cadena "Price:" y el precio del producto (propiedadprice).
- 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 2. Capítulo 7