Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {})

Question

Uncaught Invariant Violation: 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 BreadCrumb (created by Connect(BreadCrumb))
in Connect(BreadCrumb) (at Dashboard.js:607)
in div (at Dashboard.js:606)
in Dashboard (created by Connect(Dashboard))
in Connect(Dashboard) (created by Form(Connect(Dashboard)))

I get this error sometimes.

Screenshot of error: https://screenpresso.com/=hjLdf

code in BreadCrumb.js:

class BreadCrumb extends Component {
   render() {
     const { title, subpath, subpath2 } = this.props;
     return (
        <h3 className="text-themecolor">{title}</h3>
     );
   }
}

code in dashboard.js:

  class Dashboard extends Component {
      render() {
          var title = "Dashboard", subpath = "Dashboard";
          return (
            <BreadCrumb title={title} subpath={subpath} />
          );
      }
  }

The code in your question is not the code giving rise to your error. It works fine. — Tholle
Make sure props.title is a string and not an Object. You are passing it inside the <h3> and react doesn't know how to render it if its an Object. A good way to know that this is happening is also by adding a propType to Breadcrumb like this: BreadCrumb.propTypes = { title: propTypes.string } it will display a warning in the console like: Warning: Failed prop type: Invalid prop title` of type object supplied to BreadCrumb, expected string.` — Luciano Semerini

Vicente Vicente · Accepted Answer · 2019-04-04T11:18:56

This means that you are giving an object {} in the {title} a simple fix is doing this:

class BreadCrumb extends Component {

  render() {
    const { title, subpath, subpath2 } = this.props;
  return (
     <h3 className="text-themecolor">{title + ''}</h3>
     );
  }
}

Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {})

1 Answers