Dynamically map data to table using React (without keys)

Question

Im creating a table from JSON data, and main problem is I can't use object keys to map it. My json something like this:

[{
    key: 'val',
    key2: 'val',
    key3: 'val'
},
{
    key: 'val',
    key2: 'val',
    key3: 'val'
}]

Here is how i implemented header with columns:

class Table extends Component {

    render() {
        const header = this.props.data.slice(0, 1);
        return (<table>
            <thead>
            <TableHead children={header}/>
            </thead>
            <tbody>
            <TableBody children={this.props.data}/>
            </tbody>
        </table>)
    }
    }

   export default Table;

   class TableHead extends Component {

    render() {
        return (
            <tr>
                {this.props.children.map((header) => {
                    return Object.keys(header).map((el) => {
                        return <th>{el}</th>
                    })
                })}
            </tr>
        )
     }
     }

     export default TableHead;

But I can't understand how to map my table body iterating over objects... I sliced my JSON for header, but I can't do this with data, and my table looks like

class TableBody extends Component {

render() {
    const row = this.props.children.map((row) => {
        return Object.values(row).map((el,i) => {
            if (i%Object.values(row).length===0) {
                return <tr><td>{el}</td></tr>
            }else{
                return <td>{el}</td>
            }
        })
    });
    return (
        <tbody>
            {row}
        </tbody>
    )
}
}

export default TableBody;

Your query isn’t clear can you please describe your issue and expected output in detail — Hemadri Dasari
– Hemadri Dasari, Commented Feb 14, 2019 at 18:54
From your image the main problem is with TableBody so please post its code as well. — Gabriele Petrioli
– Gabriele Petrioli, Commented Feb 14, 2019 at 19:05

Gabriele Petrioli · Accepted Answer · 2019-02-14 19:19:01Z

I would extract the keys and re-use when mapping over the rows for the TableBody.

Something like

class Table extends Component {
  render() {
    const { data } = this.props;
    const columns = Object.keys(data[0]);
    return (
      <table>
        <thead>
          <TableHead columns={columns} />
        </thead>
        <tbody>
          <TableBody columns={columns} data={data} />
        </tbody>
      </table>
    );
  }
}

class TableHead extends Component {
  render() {
    const { columns } = this.props;
    return (
      <tr>
        {columns.map(header => {
          return <th>{header}</th>;
        })}
      </tr>
    );
  }
}

class TableBody extends Component {
  render() {
    const { columns, data } = this.props;
    return data.map(row => (
      <tr>
        {columns.map(cell => (
          <td>{row[cell]}</td>
        ))}
      </tr>
    ));
  }
}

Collectives™ on Stack Overflow

Dynamically map data to table using React (without keys)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related