State object.map() returning error - what am I overlooking?

Question

I would appreciate a second pair of eyes on this...

The React Component is reading-in data from MariaDB within a useEffect(). The data is being read-in without error and a console.log displays the correct data (see image below). In the return() section of the FunctionalComponent, I have this code:

<div class={style.tblBody}>
   {tableData !== undefined &&
      tableData.map((row: RDPresData) => {
         return `<div>${row.title}</div>`;
   })}
</div>

Here is the console error I receive (note the logged data above the red error).

I'm sure that at 3:30am I am missing something obvious...

Answer 1

Looking at your console.log output you can tell that tableData is an object, not an array. It says:

{tableData: {...}}

If it was an array, it would say:

{tableData: [...]}

For some reason, the tableData object happens to have numerical keys, like an array, but since it's not actually an array, .map doesn't exist.

Answer 2

If you do console.log(tableData) get above result. So you should get correctly object tableData and parse it to array to use map. Because map function is working for array.

Your tableData is an object. You should get values before use map.

<div class={style.tblBody}>
   {tableData?.tableData !== undefined &&
      Object.values(tableData.tableData).map((row: RDPresData) => {
         return `<div>${row.title}</div>`;
   })}
</div>