title: How to fix Warning: validateDOMNesting(...): <div> cannot appear as a child of <tbody>
body: <p>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 .</p>
  
  <p>tried many solutions found online but none of them worked</p>
  
  <p>UsersManagement code :</p>
  
  <pre><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 = &lt;Spinner /&gt;
      } else {
        if (users.length &gt; 0) {
          usersList = users.map(user =&gt; (
            &lt;UserItem key={user._id} user={user} /&gt;
          ))
        } else {
          usersList = &lt;h2&gt;No users&lt;/h2&gt;
        }
      }
  
      return (
        &lt;div className="row"&gt;
          &lt;div className="col-12"&gt;
            &lt;h1 className="text-center mb-2"&gt;Users Management&lt;/h1&gt;
            &lt;button type="button" className="btn btn-success mb-4"&gt;New User&lt;/button&gt;
            &lt;table className="table"&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th scope="col"&gt;Options&lt;/th&gt;
                  &lt;th scope="col"&gt;Username&lt;/th&gt;
                  &lt;th scope="col"&gt;Email&lt;/th&gt;
                  &lt;th scope="col"&gt;Phone Number&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                {usersList}
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  UsersManagement.propTypes = {
    getUsers: PropTypes.func.isRequired,
    auth: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired
  }
  
  const mapStateToProps = state =&gt; ({
    auth: state.auth,
    user: state.user
  })
  
  export default connect(mapStateToProps, {
    getUsers
  })(UsersManagement);
  </code></pre>
  
  <p>UserItem code :</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  class UserItem extends Component {
    render() {
      const { user } = this.props;
      console.log(user);
      return (
        &lt;tr&gt;
          &lt;th scope="row"&gt;
            &lt;button type="button" className="btn btn-primary fa-xs mr-1"&gt;&lt;i className="fas fa-pencil-alt"&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button type="button" className="btn btn-danger fa-xs"&gt;&lt;i className="far fa-trash-alt"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/th&gt;
          &lt;td&gt;{user.username}&lt;/td&gt;
          &lt;td&gt;{user.email}&lt;/td&gt;
          &lt;td&gt;{user.phone}&lt;/td&gt;
        &lt;/tr&gt;
      )
    }
  }
  
  UserItem.propTypes = {
    user: PropTypes.object.isRequired
  }
  
  export default UserItem;
  </code></pre>
  
  <p>i expect to to fix the warning message</p>