Create a table from JSON completely dynamically

Question

I want to create entire table from a JSON array include dynamic ths, so a decoupled the head part to:

import React from \'react\';
import TableDataT         


        

Answer 1

There is a typo again in your <td>..</td> part, missing {} for your expression. For the dynamic solution after first map you need to map your Objects as well.

<tr key={index}>
    <td>
        {
            Object.keys(currElement).map(key => currElement[key])
        }
    </td>
</tr>

Answer 2

You need to access the table data using key name as

let rows = this.props.tableData.map((currElement, index) => {
      return (
      <tr>
          { Object.keys(currElement).map((item) =>
          (
            <td>{currElement[item]}</td>
     )
       )}
      </tr>   
      )
    });