How to fix Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>

Question

im passing users list as a props to UserItem Component to make iterate on user list and displaying them on table. the list is displayed correctly and i dont have any divs in my render return but i still get the error : index.js:1446 Warning: validateDOMNesting(...): cannot appear as a child of .

tried many solutions found online but none of them worked

UsersManagement code :

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Spinner from './common/Spinner';
import { getUsers } from '../actions/userActions';
import UserItem from './UserItem';

class UsersManagement extends Component {
  componentDidMount() {
    if (!this.props.auth.isAuthenticated) {
      this.props.history.push('/login');
    }
    this.props.getUsers();
  }

  render() {
    const { users, loading } = this.props.user;
    let usersList;
    if (users === null || loading) {
      usersList = <Spinner />
    } else {
      if (users.length > 0) {
        usersList = users.map(user => (
          <UserItem key={user._id} user={user} />
        ))
      } else {
        usersList = <h2>No users</h2>
      }
    }

    return (
      <div className="row">
        <div className="col-12">
          <h1 className="text-center mb-2">Users Management</h1>
          <button type="button" className="btn btn-success mb-4">New User</button>
          <table className="table">
            <thead>
              <tr>
                <th scope="col">Options</th>
                <th scope="col">Username</th>
                <th scope="col">Email</th>
                <th scope="col">Phone Number</th>
              </tr>
            </thead>
            <tbody>
              {usersList}
            </tbody>
          </table>
        </div>
      </div>
    )
  }
}

UsersManagement.propTypes = {
  getUsers: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  user: PropTypes.object.isRequired
}

const mapStateToProps = state => ({
  auth: state.auth,
  user: state.user
})

export default connect(mapStateToProps, {
  getUsers
})(UsersManagement);

UserItem code :

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class UserItem extends Component {
  render() {
    const { user } = this.props;
    console.log(user);
    return (
      <tr>
        <th scope="row">
          <button type="button" className="btn btn-primary fa-xs mr-1"><i className="fas fa-pencil-alt"></i></button>
          <button type="button" className="btn btn-danger fa-xs"><i className="far fa-trash-alt"></i></button>
        </th>
        <td>{user.username}</td>
        <td>{user.email}</td>
        <td>{user.phone}</td>
      </tr>
    )
  }
}

UserItem.propTypes = {
  user: PropTypes.object.isRequired
}

export default UserItem;

i expect to to fix the warning message

Answer 1

Most likely the component Spinner renders a <div> as the outermost node. Check the implementation of it.

You implicitly render it inside <tbody> through the lines

<tbody>
    {usersList}
</tbody>

where usersList defaults to <Spinner /> when there are no users or loading is true. This is why get the error.

A fix would be to wrap the Spinner into a td that spans the whole row:

if (users === null || loading) {
    usersList = <tr><td colSpan="4"><Spinner /></td></tr>;
} else {
    // ...
}