title: How to fix "Objects are not valid as a React child (found: object with keys {})
body: <p>I'm working on building a full stack website that uses React, Express, Sequalize and mySQL. It is so far running with features as register and login, but when I try to add error-handling it's failing.</p>
  
  <p>I get the following error message:</p>
  
  <pre><code>Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
      in div (at Login.js:46)
      in form (at Login.js:44)
      in div (at Login.js:43)
      in div (at Login.js:42)
      in div (at Login.js:41)
      in Login (created by Route)
      in Route (at App.js:26)
      in Switch (at App.js:23)
      in div (at App.js:22)
      in div (at App.js:15)
      in Router (created by BrowserRouter)
      in BrowserRouter (at App.js:14)
      in App (at src/index.js:7)
  </code></pre>
  
  <p>When I add this code <code>{this.state.errenter code hereors}</code> in order to display error-messages such as "User cant be found".</p>
  
  <pre><code>import React, { Component } from "react";
  import { login } from "./UserFunctions";
  
  class Login extends Component {
    constructor() {
      super();
      this.state = {
        email: "",
        password: "",
        errors: {}
      };
  
      this.onChange = this.onChange.bind(this);
      this.onSubmit = this.onSubmit.bind(this);
    }
  
    onChange(e) {
      this.setState({ [e.target.name]: e.target.value });
    }
    onSubmit(e) {
      e.preventDefault();
  
      const user = {
        email: this.state.email,
        password: this.state.password
      };
  
      login(user, (res, err) =&gt; {
        if (res) {
          this.props.history.push(`/`);
        } else {
          this.setState({
            errors: err
          });
        }
      });
    }
  
    render() {
      return (
        &lt;div className="container"&gt;
          &lt;div className="row"&gt;
            &lt;div className="col-md-6 mt-5 mx-auto"&gt;
              &lt;form noValidate onSubmit={this.onSubmit}&gt;
                &lt;h1 className="h3 mb-3 font-weight-normal"&gt;Please sign in&lt;/h1&gt;
                &lt;div className="alert alert-danger" role="alert"&gt;
                  {this.state.errors}
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="email"&gt;Email address&lt;/label&gt;
                  &lt;input
                    type="email"
                    className="form-control"
                    name="email"
                    placeholder="Enter email"
                    value={this.state.email}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;div className="form-group"&gt;
                  &lt;label htmlFor="password"&gt;Password&lt;/label&gt;
                  &lt;input
                    type="password"
                    className="form-control"
                    name="password"
                    placeholder="Password"
                    value={this.state.password}
                    onChange={this.onChange}
                  /&gt;
                &lt;/div&gt;
                &lt;button
                  type="submit"
                  className="btn btn-lg btn-primary btn-block"
                &gt;
                  Sign in
                &lt;/button&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Login;
  </code></pre>
  
  <p>Appreciate any guidance on how can I can solve this one.</p>
  
  <p>EDIT: Login function calls following function in backend:</p>
  
  <pre><code>users.post("/login", (req, res) =&gt; {
    User.findOne({
      where: {
        email: req.body.email
      }
    })
      .then(user =&gt; {
        if (user) {
          if (bcrypt.compareSync(req.body.password, user.password)) {
            let token = jwt.sign(user.dataValues, process.env.SECRET_KEY, {
  
  
              expiresIn: 1440
            });
            res.send(token);
          }
        } else {
          res.status(400).json({ error: "User does not exist" });
        }
      })
      .catch(err =&gt; {
        res.status(400).json({ error: err });
      });
  });
  </code></pre>
  
  <p>and runs it through this middle-layer:</p>
  
  <pre><code>export const login = user =&gt; {
    return axios
      .post("users/login", {
        email: user.email,
        password: user.password
      })
      .then(response =&gt; {
        localStorage.setItem("usertoken", response.data);
        return response.data;
      })
      .then(response =&gt; {
        return response.error;
      })
      .catch(err =&gt; {
        console.log(err);
      });
  };
  </code></pre>
  
  <p>which is where (err) is defined.</p>