How to render response from axios.get() in grid/table - reactjs

Question

I am having a few issues with functionality of a particular part of my application.
I have a functional component 'Review Rounds' in react which performs a axios.get request. The response is then used to setState of the 'rounds' array. This part works fine. Here is the response
[
{
"label": null,
"consent": false,
"users": [],
"videoLink": "Hospital.mp4",
"id": "1da10881-b27d-46a5-883e-02296c9a6ab8",
"roundId": "1da10881-b27d-46a5-883e-02296c9a6ab8",
"idConfirmed": false
},
{
"label": null,
"consent": false,
"users": [],
"videoLink": "Hospital.mp4",
"id": "2abac091-57f4-4dec-8c0a-7b370794b081",
"roundId": "2abac091-57f4-4dec-8c0a-7b370794b081",
"idConfirmed": false
},
{
"label": null,
"consent": false,
"users": [],
"videoLink": "Hospital.mp4",
"id": "b68724dc-36b2-41b3-b677-b7ff98bac875",
"roundId": "b68724dc-36b2-41b3-b677-b7ff98bac875",
"idConfirmed": false
},
{
"label": null,
"consent": false,
"users": [],
"videoLink": "Hospital.mp4",
"id": "ec99c8cf-d180-4e2a-a246-875f7342d867",
"roundId": "ec99c8cf-d180-4e2a-a246-875f7342d867",
"idConfirmed": false
}]
I then want to display one the videoLink and roundId attributes only in a table.
I have created a columns variable like this
//Table Cols
const columns = React.useMemo(
()=>[
{
Header:"videoLink",
accessor:"videoLink"
},
{
Header:"roundId",
accessor:"roundId"
},
],
[]
)
and then defined table props and passed in columns and rounds:
const{
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} =useTable({columns , rounds})
The problem I am having is that rounds (at this stage does not seem to contain any data) despite it previously containing all of the info I need.
Am I doing something incorrectly with the state? or useEffect Methods?
Below is the full code for this functional component:
const ReviewRounds = () => {
const [rounds, setRounds]=useState([]);
const fetchVids=()=>{
axios.get(process.env.REACT_APP_URL_All_ROUNDS)
.then(res=>{
console.log("Rounds", res.data)
setRounds(res.data)
});
};
useEffect(()=>{
fetchVids();
},[])
//Table Cols
const columns = React.useMemo(
()=>[
{
Header:"videoLink",
accessor:"videoLink"
},
{
Header:"roundId",
accessor:"roundId"
},
],
[]
)
const{
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} =useTable({columns , rounds})
return (
<table {...getTableProps()} style={{ border: 'solid 1px blue' }}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th
{...column.getHeaderProps()}
style={{
borderBottom: 'solid 3px blue',
background: 'aliceblue',
color: 'black',
fontWeight: 'normal',
}}
>
{column.render('Header')}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => {
return (
<td
{...cell.getCellProps()}
style={{
padding: '10px',
border: 'solid 1px gray',
background: 'aliceblue',
}}
>
{cell.render('Cell')}
</td>
)
})}
</tr>
)
})}
</tbody>
</table>
)
}
export default ReviewRounds;
The error Im getting is:
TypeError: Cannot read properties of undefined (reading 'forEach')

Answer 1

Would say your useTable hook doesn't expect to be passed rounds as the prop for the data, since the state code seems fine.
Try something like useTable({columns , rows: rounds}) or whatever the hook expects.