Desafio: Exibir Coleções de Dados no React
Tarefa: Exibir uma Lista de Produtos
Lidar com os dados obtidos do backend e garantir sua renderização adequada em formato de lista.
A tarefa é:
- Utilizar o método
map()para renderizar um array de produtos. - Certificar-se de preencher as lacunas necessárias:
h2deve conter o nome do produto (name);pdeve conter a descrição do produto (description);spandeve conter a string "Price:" e o preço do produto (price).
- Utilizar o método
map()para iterar sobre o arrayprops.goods. - Certificar-se de definir a propriedade
keydo elemento<li>com um valor único, como a propriedade id do item. - Dentro de cada elemento
<li>, utilizar os seguintes elementos:- Um elemento
<h2>para exibir o nome do produto. Acessar o nome a partir doitematual; - Um elemento
<p>para exibir a descrição do produto. Acessar a descrição a partir doitematual; - Um elemento
<span>para exibir a string "Price:" seguida do preço do produto. Acessar o preço a partir doitematual.
- Um elemento
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 1. Capítulo 15
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.17
Desafio: Exibir Coleções de Dados no React
Deslize para mostrar o menu
Tarefa: Exibir uma Lista de Produtos
Lidar com os dados obtidos do backend e garantir sua renderização adequada em formato de lista.
A tarefa é:
- Utilizar o método
map()para renderizar um array de produtos. - Certificar-se de preencher as lacunas necessárias:
h2deve conter o nome do produto (name);pdeve conter a descrição do produto (description);spandeve conter a string "Price:" e o preço do produto (price).
- Utilizar o método
map()para iterar sobre o arrayprops.goods. - Certificar-se de definir a propriedade
keydo elemento<li>com um valor único, como a propriedade id do item. - Dentro de cada elemento
<li>, utilizar os seguintes elementos:- Um elemento
<h2>para exibir o nome do produto. Acessar o nome a partir doitematual; - Um elemento
<p>para exibir a descrição do produto. Acessar a descrição a partir doitematual; - Um elemento
<span>para exibir a string "Price:" seguida do preço do produto. Acessar o preço a partir doitematual.
- Um elemento
Tudo estava claro?
Obrigado pelo seu feedback!
Seção 1. Capítulo 15