LabEx
EntrarJunte-se

Tabela React Dinâmica com Dados Primitivos

Beginner

This tutorial is from open-source community. Access the source code

Introdução

Neste laboratório, exploraremos como usar React para renderizar dinamicamente uma tabela com linhas criadas a partir de um array de primitivos. Especificamente, utilizaremos o método Array.prototype.map() para mapear cada item no array de dados para um elemento <tr> com uma chave apropriada e exibi-lo em uma tabela com duas colunas: ID e Valor. Ao final deste laboratório, você terá uma melhor compreensão de como usar React para criar tabelas dinâmicas e responsivas.

Este é um Lab Guiado, que fornece instruções passo a passo para ajudá-lo a aprender e praticar. Siga as instruções cuidadosamente para completar cada etapa e ganhar experiência prática. Dados históricos mostram que este é um laboratório de nível iniciante com uma taxa de conclusão de 100%. Recebeu uma taxa de avaliações positivas de 100% dos estudantes.

Tabela de Dados

index.html e script.js já foram fornecidos na VM. Em geral, você só precisa adicionar código a script.js e style.css.

Crie um elemento de tabela com duas colunas, ID e Valor, onde cada linha é gerada dinamicamente a partir de um array de valores primitivos.

Para realizar isso, use o método Array.prototype.map() para criar um novo array de elementos JSX representando cada item no array de entrada data como um elemento <tr> com uma key apropriada. Dentro de cada <tr>, adicione dois elementos <td> para exibir o índice e o valor da linha, respectivamente.

Aqui está um exemplo de implementação:

const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

Para usar este componente com um array de nomes de pessoas, por exemplo, você pode chamá-lo da seguinte forma:

const people = ["John", "Jesse"];
ReactDOM.createRoot(document.getElementById("root")).render(
  <DataTable data={people} />
);

Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Resumo

Parabéns! Você concluiu o laboratório da Tabela de Dados. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.