Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr> using React-bootstrap

Question

I have this code. This and more is in the return statement of the render() method

<Table striped bordered condensed hover responsive>
    <thead>
    <tr>
        <th style={{textAlign: 'center'}}>Imie Nazwisko/Nazwa firmy</th>
        <th style={{textAlign: 'center'}}>ID</th>
        <th style={{textAlign: 'center'}}>Raporty</th>
    </tr>
    </thead>
    <tbody>
    {
        this.state.users && this.state.users.map((user, i) => (
            <tr key={user.id}>
                <td>
                    {user.userType === 'person' ? `${user.person.firstName} ${user.person.lastName}` : user.company.name}
                </td>
                <td>{user.id}</td>
                <Table striped bordered hover responsive>
                    <tbody>
                    {
                        user.reports.map(report => (
                            <tr key={report.id}>
                                <td>{report.id}</td>
                            </tr>
                        ))
                    }
                    </tbody>
                </Table>
            </tr>
        ))
    }
    </tbody>
</Table>

And this error code:

Warning: validateDOMNesting(...): <div> cannot appear as a child of <tr>.
    in div (created by Table)
    in Table (at ReportsComponent.js:59)
    in tr (at ReportsComponent.js:54)
    in tbody (at ReportsComponent.js:51)
    in table (created by Table)
    in div (created by Table)
    in Table (at ReportsComponent.js:43)
    in ReportsComponent (at NavigationComponent.js:67)

So the problem is I am not creating the div myself. I can see that Table is creating the div that's throwing the error.

I am using the Table component from react-bootstrap.

This code looks OK in the browser, and seems to work, but the error is just irritating. How can I solve it?

Answer 1

React Bootstrap generates a Table in form of div when adding the responsive property. To avoid this warning (note, not a blocking error) you could wrap the Table component in a td.

Or if you prefer you can write a wrapper around React Bootstrap's Table to make sure it gets surrounded by td if the responsive property is passed in.