Converting array data into a table in React

Question

I have an array with three objects in it. I want to map all of them and render them in a table in React. I am able to extract values using the map method, but I am not sure how to render them as a table.

[
   {
      "email":"[email protected]",
      "firstname":"gowtham",
      "lastname":"ss",
      "password":"outlook010"
   },
   {
      "email":"[email protected]",
      "firstname":"ss",
      "lastname":"ss",
      "password":"ss"
   },
   {
      "email":"[email protected]",
      "firstname":"gow",
      "lastname":"gow",
      "password":"gow"
   }
]

Following is the code I used to map the array data:

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

I want to render it using a table in react.

Answer 1

You can do it like this:

<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>