在react中将数组数据转换为表格

Question

我有一个包含三个对象的数组。我想映射所有这些并将它们渲染在反应表中。我可以使用映射方法提取值，但我不确定如何将它们呈现为表格。

[
   {
      "email":"gowtham@outlook.com",
      "firstname":"gowtham",
      "lastname":"ss",
      "password":"outlook010"
   },
   {
      "email":"ss@ss.com",
      "firstname":"ss",
      "lastname":"ss",
      "password":"ss"
   },
   {
      "email":"gow@gow.com",
      "firstname":"gow",
      "lastname":"gow",
      "password":"gow"
   }
]

图片来自chrome开发者工具

以下是我用来映射数组数据的代码：

const exportHeaderData = Object.values(this.state.registeredData).map(
            (data) => {
                return Object.entries(data).map((key,value) => {
                    return `${key}: ${value}`;
                });
            }
        );

我想使用反应中的表格来渲染它。

Answer 1

你可以这样做：

<table>
  <thead>
    <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Password</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    {arrayWithData.map(item => {
      return (
        <tr key={item.password}>
          <td>{ item.firstname }</td>
          <td>{ item.lastname }</td>
          <td>{ item.password }</td>
          <td>{ item.email }</td>
        </tr>
      );
    })}
  </tbody>
</table>

Answer 2

您需要使用map来迭代条目并为每个条目返回一个HTML表格行

<table>
  <tbody>
     <th>
        <td>Email</td>
        <td>First Name</td>
        <td>Last Name</td>
        <td>Password</td>
      </th>
    {this.state.registeredData.map(row => (
      <tr key={row.email}>
        <td>{row.email}</td>
        <td>{row.firstname}</td>
        <td>{row.lastname}</td>
        <td>{row.password}</td>
      </tr>
    ))}
  </tbody>
</table>