In my React project, I'm trying to output a table (using react-data-table-component).

So here it is my code:

import React from "react";
import DataTable from "react-data-table-component";

class WrapperTableTile extends React.Component {
  render(){
    const {data} = this.props;
    const key = this.props.data[0];
    const keys = Object.keys({...key});

    return (
      <div className="card p-4 mb-4">
        <DataTable
          title=""
          columns={keys}
          data={data}
          defaultSortField="title"
          pagination
          selectableRows
          className="table myDataTable"
          highlightOnHover={true}
        />
      </div>
    )
  }
}

WrapperTableTile.defaultProps={
  data:{
    title:"",
    columns:[],
    rows:[]
  }
}

WrapperTableTile.propTypes={
  data:WrapperTableTileType
}

export default WrapperTableTile;

My data is a JSON Array with different Objects, and I use Object.key to get only keys of the first Object, to use them as names of columns in the table.

It doesn't work because keys output is an Object like: {'ID','NAME','AGE',...} instead of DataTable needs an array to be used for columns={keys}, like:

{
  name: "ID",
  selector: "ID",
  sortable: true,
},
{
  name: "NAME",
  selector: "NAME",
  sortable: true,
},
{
  name: "AGE",
  selector: "AGE",
  sortable: true,
},

So at the end, in React I don't know how to do something like this:

for (i = 0; i < keys.length; i++) {
  {
    name: keys[i],
    selector: keys[i],
    sortable: true,
  }
}

How could I edit my array to use it as value in my component?