How can you use the map array method if response is an object?

Question

React

I make a request to the server

And I get the following response from the server (I get an object):

server response

{"data": [
    {
      "id":20, 
      "title":"people",
      "created_at":"2020-01-15 05:30:10",
      "updated_at":"2020-01-15 05:30:10"
    }
  ]
}

And I display the answer in the form of a table:

export default ({dataAttribute}) => (
  <table className="table">
    <thead>
      <tr>
        <th></th>
        <th>id</th>
        <th>title</th>
        <th>created_at</th>
        <th>updated_at</th>
      </tr>
    </thead>
    <tbody>
      {dataAttribute.map(item => (
        <tr key={item.id}>
          <td>{item.id}</td>
          <td>{item.title}</td>
          <td>{item.created_at}</td>
          <td>{item.updated_at}</td>
        </tr>
      ))}
    </tbody>
  </table>
);

And then I get an error:
TypeError: Cannot read property 'map' of undefined
Because the map method can only be applied to an array and my response is an object.

And I tried to change this:
{dataAttribute.map(item => (
To this:
{Object.keys(dataAttribute).map(item => (

But still I can’t display my data in the form of a table on the page, because there is an error.
Warning: Each child in a list should have a unique "key" prop.
There is a page, there are headers, but there is no data under the headers:
like this:

What should I fix in the code to implement this?

Answer 1

most likely dataAttribute is still null or not defined at some point. Either figure out why - for example, at the time of the mount, the data has not yet been loaded, or Object.keys(dataAttribute || {})..., if (dataAttribute) Object.keys(dataAttribute)...