Warning: validateDOMNesting(…): <tr> cannot appear as a child of <div>.How can I solve this?

  javascript, material-ui, react-dom, reactjs

I have used table component from Material UI and have filled it with my JSON data.But it is showing the error:-https://i.stack.imgur.com/jiCH6.png
The table should get updated with new values when I scroll but it’s not happening.
My React JS Code:-

return (
<TableContainer component={Paper} >
<Table className={classes.table} aria-label="simple table">
    <TableHead>
    <TableRow>
    <TableCell>Dessert (100g serving)</TableCell>
    <TableCell align="right">Calories</TableCell>
    <TableCell align="right">Fat&nbsp;(g)</TableCell>
    <TableCell align="right">Carbs&nbsp;(g)</TableCell>
    <TableCell align="right">Protein&nbsp;(g)</TableCell>
    </TableRow>
    </TableHead>
<TableBody>
<InfiniteScroll
    dataLength={data.length}
    next={fetchMoreData}
    hasMore={hasMore}
    loader={
    <div
        style={{ height: "80%", paddingLeft: "35%", overflow: "hidden" }}
    >
    <CircularProgress />
    </div>
    }
>
    {data.data?.map((row) => (
    <TableRow key={row.doc_id}>
        <TableCell component="th" scope="row">
        {row.invoice_id}
        </TableCell>
        <TableCell align="right">{row.cust_number}</TableCell>
        <TableCell align="right">{row.name_customer}</TableCell>
        <TableCell align="right">{row.due_in_date}</TableCell>
        <TableCell align="right">{row.total_open_amount}</TableCell>
    </TableRow>
    ))}
</InfiniteScroll>    
</TableBody>
</Table>
</TableContainer>    
);
}

How can I solve it?

Source: Ask Javascript Questions

LEAVE A COMMENT