title: React Error: Objects are not valid as a React child,If you meant to render a collection of children, use an array instead
body: <p>i am new to the react when i have done a crud application using React and flux i got this error my codes are below,</p>
  
  <h2>UserList</h2>
  
  <pre><code>import React, { Component } from "react";
  import $ from "jquery";
  import UserStore from "../../stores/UserStore";
  import * as UserActions from "../../actions/UserActions";
  import AddUser from "./AddUser";
  
  $.DataTable = require("datatables.net");
  
  class UserList extends Component {
    constructor() {
      super();
      this.getUsers = this.getUsers.bind(this);
      this.state = {
        users: UserStore.getAll()
      };
      this.loadUsers();
    }
  
    componentDidMount() {
      $(document).ready(function() {
        $("#example").DataTable({
          ordering: true
        });
      });
    }
  
    componentWillMount() {
      UserStore.on("change", this.getUsers);
    }
  
    componentWillUnmount() {
      UserStore.removeListener("change", this.getUsers);
    }
  
    getUsers() {
      console.log(" get users called");
      this.setState({
        users: UserStore.getAll()
      });
    }
  
    loadUsers() {
      UserActions.getUsersList();
    }
  
    render() {
      const userlistitem = this.state.users.map((user, index) =&gt; (
        &lt;tr key={index}&gt;
          &lt;th scope="row"&gt;{index}&lt;/th&gt;
          &lt;td&gt;{user.name}&lt;/td&gt;
          &lt;td&gt;{user.username}&lt;/td&gt;
          &lt;td&gt;{user.email}&lt;/td&gt;
          &lt;td&gt;{user.dob}&lt;/td&gt;
          &lt;td&gt;{user.address}&lt;/td&gt;
          &lt;td&gt;{user.mobile}&lt;/td&gt;
          &lt;td&gt;{user.branch}&lt;/td&gt;
        &lt;/tr&gt;
      ));
      return (
        &lt;div
          style={{
            marginTop: 80,
            marginLeft: 150,
            marginRight: 150
          }}
        &gt;
          &lt;div className="card text-white bg-info mb-3"&gt;
            &lt;div className="card-body"&gt;
              &lt;div className="d-flex justify-content-between"&gt;
                &lt;h5&gt;User List&lt;/h5&gt;
                &lt;div&gt;
                  &lt;button
                    style={{
                      marginTop: 10
                    }}
                    type="button"
                    className="btn btn-light "
                    data-toggle="modal"
                    data-target="#exampleModalCenter"
                  &gt;
                    Add New User
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;table id="example" className="table table-bordered  table-striped "&gt;
            &lt;thead className="thead-dark"&gt;
              &lt;tr&gt;
                &lt;th scope="col"&gt;#&lt;/th&gt;
                &lt;th scope="col"&gt;Name&lt;/th&gt;
                &lt;th scope="col"&gt;User Name&lt;/th&gt;
                &lt;th scope="col"&gt;Email&lt;/th&gt;
                &lt;th scope="col"&gt;DOB&lt;/th&gt;
                &lt;th scope="col"&gt;Address&lt;/th&gt;
                &lt;th scope="col"&gt;Mobile&lt;/th&gt;
                &lt;th scope="col"&gt;Branch&lt;/th&gt;
              &lt;/tr&gt;
            &lt;/thead&gt;
            &lt;tbody&gt;{userlistitem}&lt;/tbody&gt;
          &lt;/table&gt;
          &lt;AddUser /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default UserList;
  </code></pre>
  
  <h2>Add User</h2>
  
  <pre><code>import React, { Component } from "react";
  import DatePicker from "react-datepicker";
  import "react-datepicker/dist/react-datepicker.css";
  import "../../css/datepicker.css";
  import * as UserActions from "../../actions/UserActions";
  
  class AddUser extends Component {
    constructor(props) {
      super(props);
      this.state = {
        branch: "",
        name: "",
        username: "",
        mobile: "",
        email: "",
        address: "",
        dob: new Date()
      };
      this.handleInputChange = this.handleInputChange.bind(this);
      this.handledatepickerchange = this.handledatepickerchange.bind(this);
    }
  
    handleInputChange(event) {
      const target = event.target;
      const value = target.value;
      const name = target.name;
      this.setState({ [name]: value });
    }
    handledatepickerchange(event) {
      this.setState({ dob: event });
    }
  
    createUser = () =&gt; {
      console.log("this is:", this);
      const user = {
        branch: this.state.branch,
        name: this.state.name,
        username: this.state.username,
        mobile: this.state.mobile,
        email: this.state.email,
        address: this.state.address,
        dob: this.state.dob
      };
      UserActions.createNewUser(user);
      this.setState({
        branch: "",
        name: "",
        username: "",
        mobile: "",
        email: "",
        address: "",
        dob: new Date()
      });
    };
  
    render() {
      return (
        &lt;div
          className="modal fade"
          id="exampleModalCenter"
          tabIndex="-1"
          role="dialog"
          aria-labelledby="exampleModalCenterTitle"
          aria-hidden="true"
        &gt;
          &lt;div className="modal-dialog modal-dialog-centered" role="document"&gt;
            &lt;div className="modal-content"&gt;
              &lt;div className="modal-header"&gt;
                &lt;h5 className="modal-title" id="exampleModalCenterTitle"&gt;
                  Add New User
                &lt;/h5&gt;
                &lt;button
                  type="button"
                  className="close"
                  data-dismiss="modal"
                  aria-label="Close"
                &gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="modal-body"&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;input
                    name="name"
                    type="text"
                    className="form-control"
                    placeholder="Name"
                    aria-label="Name"
                    aria-describedby="button-addon2"
                    value={this.state.name}
                    onChange={this.handleInputChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;input
                    name="username"
                    type="text"
                    className="form-control"
                    placeholder="User Name"
                    aria-label="User Name"
                    aria-describedby="button-addon2"
                    value={this.state.username}
                    onChange={this.handleInputChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;input
                    name="email"
                    type="email"
                    className="form-control"
                    placeholder="Email"
                    aria-label="Email"
                    aria-describedby="button-addon2"
                    value={this.state.email}
                    onChange={this.handleInputChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;input
                    name="address"
                    type="text"
                    className="form-control"
                    placeholder="Address"
                    aria-label="Address"
                    aria-describedby="button-addon2"
                    value={this.state.address}
                    onChange={this.handleInputChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;input
                    name="branch"
                    type="text"
                    className="form-control"
                    placeholder="Branch"
                    aria-label="Branch"
                    aria-describedby="button-addon2"
                    value={this.state.branch}
                    onChange={this.handleInputChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;DatePicker
                    name="dob"
                    type="text"
                    className="form-control"
                    placeholder="DOB"
                    aria-label="DOB"
                    aria-describedby="button-addon2"
                    selected={this.state.dob}
                    onChange={this.handledatepickerchange}
                  /&gt;
                  &lt;p
                    style={{
                      marginTop: "5px",
                      fontWeight: "200",
                      marginLeft: "10px"
                    }}
                  &gt;
                    Date of Birth(dd/mm/yyyy)
                  &lt;/p&gt;
                &lt;/div&gt;
                &lt;div className="input-group mb-3"&gt;
                  &lt;input
                    name="mobile"
                    type="number"
                    className="form-control"
                    placeholder="Mobile No."
                    aria-label="Mobile No."
                    aria-describedby="button-addon2"
                    value={this.state.mobile}
                    onChange={this.handleInputChange}
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className="modal-footer"&gt;
                &lt;br /&gt;
                &lt;br /&gt;
                &lt;button
                  type="button"
                  className="btn btn-secondary"
                  data-dismiss="modal"
                &gt;
                  Close
                &lt;/button&gt;
                &lt;button
                  type="button"
                  className="btn btn-primary"
                  data-dismiss="modal"
                  onClick={this.createUser}
                &gt;
                  Save
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default AddUser;
  </code></pre>
  
  <h2>Action</h2>
  
  <pre><code>import dispatcher from "../dispatcher/dispatcher";
  import { BASE_URL } from "../utils/AppConstants";
  
  export function getUsersList() {
    console.log("getting the data! ");
    fetch(BASE_URL + "/users")
      .then(res =&gt; res.json())
      .then(
        result =&gt; {
          console.log("res " + result);
          dispatcher.dispatch({ type: "RECEIVE_USERS", users: result });
        },
        // Note: it's important to handle errors here instead of a catch() block so that
        // we don't swallow exceptions from actual bugs in components.
        error =&gt; {
          //  here manage error and close loading;
          console.log("getting error " + error);
        }
      );
  }
  
  export function createNewUser(user) {
    console.log("post the data!");
    fetch(BASE_URL + "/saveuser", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify(user)
    })
      .then(res =&gt; res.json())
      .then(
        result =&gt; {
          dispatcher.dispatch({ type: "CREATE_USER", newUser: user });
        },
        // Note: it's important to handle errors here instead of a catch() block so that
        // we don't swallow exceptions from actual bugs in components.
        error =&gt; {
          //  here manage error and close loading;
          console.log("getting error " + error);
        }
      );
  }
  </code></pre>
  
  <h2>Store</h2>
  
  <pre><code>import { EventEmitter } from "events";
  import dispatcher from "../dispatcher/dispatcher";
  
  class UserStore extends EventEmitter {
    constructor() {
      super();
      dispatcher.register(this.handleActions.bind(this));
      this.users = [
        {
          branch: "19",
          name: "Javcbvcsim11",
          username: "zxcv",
          mobile: "5645654",
          email: "demo@gmail.com111",
          address: "Demo vcbvcbAddress1",
          dob: "2020-11-06T00:00:00.000+0000"
        }
      ];
    }
  
    createUser(newUser) {
      this.users.push(newUser);
      console.log("new  users lenght " + this.users.lenght);
      this.emit("change");
    }
  
    getAll() {
      return this.users;
    }
    handleActions(action) {
      switch (action.type) {
        case "RECEIVE_USERS": {
          this.users = action.users;
          this.emit("change");
          break;
        }
        case "CREATE_USER": {
          this.createUser(action.newUser);
          break;
        }
      }
    }
  }
  
  export default new UserStore();
  </code></pre>
  
  <p>I don't know what is the problem happened here.When checked in stack over flow i got that it's the problem of iterating the data. But i already did that. even though the error remain still.If any one can help it will be much appreciable.
  The error thrown in setState method. i am here using flux as the architecture.The problem occures when i try to add a new user to my data.Actualyy when i add it inserting to db without any problem. the problem is when i click save button in my AddUser component it saves in to my db but after it need to show again as a table list but the error throws.</p>