Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Exibir Coleções de Dados no React | Fundamentos do React e UI Baseada em Componentes
Domínio do React

bookDesafio: 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:
  1. h2 deve conter o nome do produto (name);
  2. p deve conter a descrição do produto (description);
  3. span deve conter a string "Price:" e o preço do produto (price).
  1. Utilizar o método map() para iterar sobre o array props.goods.
  2. Certificar-se de definir a propriedade key do elemento <li> com um valor único, como a propriedade id do item.
  3. Dentro de cada elemento <li>, utilizar os seguintes elementos:
    • Um elemento <h2> para exibir o nome do produto. Acessar o nome a partir do item atual;
    • Um elemento <p> para exibir a descrição do produto. Acessar a descrição a partir do item atual;
    • Um elemento <span> para exibir a string "Price:" seguida do preço do produto. Acessar o preço a partir do item atual.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 15

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.17

bookDesafio: 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:
  1. h2 deve conter o nome do produto (name);
  2. p deve conter a descrição do produto (description);
  3. span deve conter a string "Price:" e o preço do produto (price).
  1. Utilizar o método map() para iterar sobre o array props.goods.
  2. Certificar-se de definir a propriedade key do elemento <li> com um valor único, como a propriedade id do item.
  3. Dentro de cada elemento <li>, utilizar os seguintes elementos:
    • Um elemento <h2> para exibir o nome do produto. Acessar o nome a partir do item atual;
    • Um elemento <p> para exibir a descrição do produto. Acessar a descrição a partir do item atual;
    • Um elemento <span> para exibir a string "Price:" seguida do preço do produto. Acessar o preço a partir do item atual.

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 15
some-alt