Sometimes when I save table which has two products in backend (it's a product table display on frontend) shows but not everytime when I call the component as expected.
The component is called through routing in App.js and through /productshow url. In console though fetched data.
I have tried simple h1 tag in place of table and it works fine. Some error is definitely occuring in rendering the table
const DisplayProduct = () => {
toast.success("in Display");
const [product, setProduct] = useState([]);
const getAllProductsFromServer = () => {
axios.get(`${base_url}/productshow`).then(
(response) => {
console.log(response);
setProduct(response.data);
console.log("Done");
},
(error) => {
console.log(error);
}
);
};
useEffect(() => {
getAllProductsFromServer();
}, []);
const columns = useMemo(() => COLUMNS, [])
const data = useMemo(() => product, [])
const TableInstance = useTable(
{
columns,
data,
}
)
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = TableInstance
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => {
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
{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()}>{cell.render('Cell')}</td>
})}
</tr>
)
})}
</tbody>
</table>
)
};
export default DisplayProduct;