Exibir dados da lista

Concluído

Como o React se baseia em JSX, que é uma combinação de JavaScript e XML/HTML, você pode gerar HTML dinamicamente, totalmente integrado ao seu JavaScript.

Cenário

Você deseja exibir a lista de ingredientes, incluindo a adição de uma linha para todos os itens marcados como preparados. Faça isso criando um arquivo .css para o estilo e um componente para sua lista de ingredientes.

Criar o estilo

1. Crie um arquivo em src chamado IngredientList.css.

2. Adicione o seguinte código a IngredientList.css:

   .prepared {
       text-decoration: line-through;
   }
   
   

Criar o componente

Como o HTML é integrado ao JavaScript no JSX, você conta com JavaScript para lógica e looping. Para exibir um conjunto de itens contidos em uma matriz, você normalmente usa a função map. map foi projetado para criar uma nova matriz de itens com base no resultado de uma chamada de função. Se você quiser exibir uma lista de títulos em uma lista ordenada, use map e a sintaxe { } que aprendeu anteriormente.

1. Em src, crie um novo arquivo chamado IngredientList.jsx.

2. Adicione o seguinte código ao arquivo:

   import './IngredientList.css'
   import React from 'react';
   
   function IngredientList(props) {
       // Create the list items using map
       const ingredientListItems = props.ingredients.map((ingredient, index) => {
           return (
               // Return the desired HTML for each ingredient
               <li key={index} className={ ingredient.prepared ? 'prepared' : '' }>
                   { ingredient.name }
               </li>
           );
       });
   
       // return the HTML for the component
       // ingredientListItems will be rendered as li elements
       return (
           <ul>
               { ingredientListItems }
           </ul>
       );
   }
   
   export default IngredientList;
   

Explore o código

Comece criando uma matriz de cadeias de caracteres para conter a lista de ingredients. Você deseja que cada ingrediente seja exibido como um item de lista. Implemente isso usando map.

Como destacado anteriormente, map comporta-se de forma semelhante a uma instrução for each. Ele executa a função uma vez para cada item na matriz. Você deseja exibir uma coleção de elementos HTML li, portanto, retorna o JSX apropriado, com {ingredient} dentro de li.

Atualizar App para usar IngredientList

Vamos exibir sua lista de ingredientes!

1. Abra src/app.jsx.

2. Após a linha TODO: Import IngredientList, adicione o seguinte código:

   // TODO: Import IngredientList
   import IngredientList from './IngredientList'
   

3. Após a linha TODO: Add IngredientList component, adicione o seguinte JavaScript:

   {/* TODO: Add IngredientList component */}
   <IngredientList ingredients={recipe.ingredients} />
   

Exibir os resultados

Salve todos os arquivos. O navegador atualizará e exibirá automaticamente as novas atualizações. Observe a lista de ingredientes, com os dois últimos itens mostrados como preparados, com uma linha no meio deles.