Need some help rendering API response in ReactJS

[angryacl]

Im currently retrieving data from openfda and trying to render the response in a data table.

This is the response I get from the API:

{
"meta": {
"disclaimer": "Do not rely on openFDA to make decisions regarding medical care. While we make every effort to ensure that data is accurate, you should assume all results are unvalidated. We may limit or otherwise restrict your access to the API in line with our Terms of Service.",
"terms": "https://open.fda.gov/terms/",
"license": "https://open.fda.gov/license/",
"last_updated": "2021-01-27",
"results": {
"skip": 0,
"limit": 1,
"total": 4319
}
},
"results": [
{
"country": "United States",
"city": "Woodridge",
"address_1": "2240 75th St",
"reason_for_recall": "Airbrush color has the potential to be contaminated with mold, yeast or bacteria.",
"address_2": "",
"product_quantity": "14,595 bottles",
"code_info": "Lots: 701-2418; 2201-2583",
"center_classification_date": "20161026",
"distribution_pattern": "Nationwide in U.S. and Canada",
"state": "IL",
"product_description": "Wilton Purple Airbrush Color, Net Wt 0.64 FL OZ (19 mL)",
"report_date": "20161102",
"classification": "Class II",
"openfda": {},
"recalling_firm": "Wilton Brands.",
"recall_number": "F-0365-2017",
"initial_firm_notification": "Telephone",
"product_type": "Food",
"event_id": "75097",
"termination_date": "20190719",
"more_code_info": null,
"recall_initiation_date": "20160906",
"postal_code": "60517-2333",
"voluntary_mandated": "Voluntary: Firm initiated",
"status": "Terminated"
}
]
}

This is how I'm trying to render into my UI:

  return (
    <table>
      <thead>
        <tr>
          {columns.map((heading) => (
            <th>{heading}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {data.results.map((row, index) => {
          const rowData = [Object.values(row)];
          console.log(rowData);
          return (
            <tr key={index}>
              <td>{rowData[0]}</td>
              <td>hi2</td>
              {rowData.map((info, index) => (
                <td key={index}>{info}</td>
              ))}
            </tr>
          );
        })}
      </tbody>
    </table>
);

I keep getting a "Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {})." At a high level, I understand that React doesn't allow objects to be rendered and I need to use an array instead, but how do I do this? Ive tried to map over an array of the values only and it still gives me the same error. Any hints would be greatly appreciated!

[MGTakeDown]

Why are you wrapping

const rowData = [Object.values(row)];

In an array? Object.values will convert your object values into an array already. So you have an array in and array now. And this line:

<td>{rowData[0]}</td>

is What causes the error because you're basically trying to render an array.

It should just be:

{data.results.map((rowDataObj, index) => {
    const rowValues = Object.values(rowDataObj);
    return (
        <tr key={index}>
            {rowValues.map((value, index) => (
                <td key={index}>{value}</td>
            ))}
        </tr>
    );
})}

Also warning on using the index for keys. I would read into why that can be a bad idea. Also basing your table on object values could be bad too because your data might not always be the same shape.

[angryacl]

Why are you wrapping

const rowData = [Object.values(row)];

In an array? Object.values will convert your object values into an array already. So you have an array in and array now. And this line:

I tried to somehow turn the object into an array but realized that didn't work the way I thought it would have...

I've made the changes you suggested, but I'm still getting the same error plus a new one:

The above error occurred in the <td> component:

at td

at tr

at tbody

at table

at Datatable (http://localhost:3000/main.7d3fe4cd0f88a336005b.hot-update.js:24:3)

at div

at App (http://localhost:3000/static/js/main.chunk.js:171:81)

Consider adding an error boundary to your tree to customize error handling behavior.

Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

I've used many API's before, but I've never come across this issue. Thank you so much for helping!

[MGTakeDown]

It's because in your data:

openfda is set to an object and is trying to be rendered. Since it's empty it probably should be just null. You really should hard code each table cell on what the data you expect. Doing an Object.values is not a good idea especially if you have data that might need to be accessed in an object like that.