1 - Introdução 2 - Criando projeto 3 - Gerando tabela 4 - Estruturando projeto 5 - Configurando repositório 6 - Configurando controle 7 - Modelo para validar requisições 8 - Serviço para listar produtos 9 - Rota para listar produtos 10 - Serviço para cadastrar produtos 11 - Rota para cadastrar produtos 12 - Serviço para alterar produtos 13 - Rota para alterar produtos 14 - Serviço para remover produtos 15 - Rota para remover produtos 16 - Cors 17 - Criando projeto React 18 - Criando componentes no React 19 - Estrutura de formulário no React 20 - Estrutura de tabela no React 21 - Estilizando componentes 22 - Visibilidade dos botões 23 - Obtendo os produtos 24 - Exibindo os produtos na tabela 25 - Objeto produto 26 - UseState de produto 27 - Obtendo dados do formulário 28 - Cadastrar produtos 29 - Limpar formulário 30 - Selecionar produto 31 - Cancelando alteração e exclusão 32 - Remover produto 33 - Alterar produto 34 - Considerações finais

24 - Exibindo os produtos na tabela

Nessa vigésima quarta parte do nosso tutorial de Spring Boot e React, iremos exibir os produtos obtidos da nossa API em nosso componente de tabela.

Veja abaixo o código implementado nessa etapa do projeto:

function Tabela({vetor}){
  return(
      <table className='table'>
          <thead>
              <tr>
                  <th>#</th>
                  <th>Nome</th>
                  <th>Marca</th>
                  <th>Selecionar</th>
              </tr>
          </thead>

          <tbody>
              {
                  vetor.map((obj, indice) => (
                      <tr key={indice}>
                          <td>{indice+1}</td>
                          <td>{obj.nome}</td>
                          <td>{obj.marca}</td>
                          <td><button className="btn btn-success">Selecionar</button></td>
                      </tr>
                  ))
              }
          </tbody>
      </table>   
  )
}

export default Tabela;

Acompanhe o vídeo para conseguir implementar a exibição de produtos na tabela.