REACT Table select rows not creating checkboxes correctly - reactjs

Question

I am new to REACT and having trouble getting a table component to work correctly.
I am using the react-tables package and the tutorial example here but I am doing everything in a table.js component file and adding it to my App.js. Basically, I am trying to create a table with pagination, sorting, and selectable rows with checkboxes. My issue is that I am only getting the checkboxes to populate in the header (see below).
Here is my code; what am I doing incorrectly here? Note - my rows are being created using page, not row and are coming from my API. Any suggestions on how to fix this?
import React, { useMemo, useEffect, useState } from 'react'
import reactTable, {useTable, useRowSelect, usePagination, useSortBy} from 'react-table'
import axios from "axios";
import { COLUMNS } from './columns'
import './Table.css'
export const Table = () => {
const [loadingData, setLoadingData] = useState(true);
const columns = useMemo(() => COLUMNS, []);
const [data, setData] = useState([]);
const IndeterminateCheckbox = React.forwardRef(
//This is the function for the checkboxes in page select
({ indeterminate, ...rest }, ref) => {
const defaultRef = React.useRef()
const resolvedRef = ref || defaultRef
React.useEffect(() => {
resolvedRef.current.indeterminate = indeterminate
}, [resolvedRef, indeterminate])
return (
<>
<input type="checkbox" ref={resolvedRef} {...rest} />
</>
)
}
)
useEffect(() => {
async function getData() {
await axios
.get("http://localhost:5000/my/api")
.then((response) => {
// check if the data is populated
console.log(response.data);
setData(response.data);
// you tell it that you had the result
setLoadingData(false);
});
}
if (loadingData) {
// if the result is not ready so you make the axios call
getData();
}
}, []);
const tableInstance = useTable({
columns,
data,
initialState: { pageIndex: 2 }
}, useSortBy,
usePagination,
useRowSelect,
hooks => {
hooks.visibleColumns.push(columns => [
// Let's make a column for selection
{
id: 'selection',
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox
Header: ({ getToggleAllPageRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllPageRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox {...row.getToggleRowSelectedProps()} />
</div>
),
},
...columns,
])
}
);
const { getTableProps,
getTableBodyProps,
headerGroups,
prepareRow,
page, //Begins the pagination and select stuff
canPreviousPage,
canNextPage,
pageOptions,
pageCount,
gotoPage,
nextPage,
previousPage,
setPageSize,
selectedFlatRows,
state: { pageIndex, pageSize, selectedRowIds }} = tableInstance
return (
<div className="container">
{loadingData ? (
<p>Loading Please wait...</p>
) : (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{
headerGroup.headers.map((column) =>(
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
{column.render('Header')}
<span>
{column.isSorted
? column.isSortedDesc
? ' 🔽'
: ' 🔼'
: ''}
</span>
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{
page.map((row, i) => {
prepareRow(row);
return(
<tr {...row.getRowProps()}>
{
row.cells.map(cell => {
console.log(cell.render('Cell').props.value);
//<td {...cell.getCellProps()}>{cell.render('Cell').props.value}</td>
return <td>{cell.render('Cell').props.value}</td>
})
}
</tr>
)
})
}
</tbody>
</table>
)}
<div className="pagination">
<button onClick={() => gotoPage(0)} disabled={!canPreviousPage}>
{'<<'}
</button>{' '}
<button onClick={() => previousPage()} disabled={!canPreviousPage}>
{'<'}
</button>{' '}
<button onClick={() => nextPage()} disabled={!canNextPage}>
{'>'}
</button>{' '}
<button onClick={() => gotoPage(pageCount - 1)} disabled={!canNextPage}>
{'>>'}
</button>{' '}
<span>
Page{' '}
<strong>
{pageIndex + 1} of {pageOptions.length}
</strong>{' '}
</span>
<span>
| Go to page:{' '}
<input
type="number"
defaultValue={pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 0
gotoPage(page)
}}
style={{ width: '100px' }}
/>
</span>{' '}
</div>
</div>
)
}

Answer 1

Return <td {...cell.getCellProps()}>{cell.render('Cell')}</td> from tr.
This should work:
<tbody {...getTableBodyProps()}>
{page.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td> // fix return statement
);
})}
</tr>
);
})}
</tbody>