Error objects are not valid as a react child

Error objects are not valid as a React child

If you’re getting this error, it means that you’re trying to render an object in React that’s not a valid React element.

There are two ways to fix this:

Wrap your object in a valid React element (such as a div)
Use the expandProps utility function to turn your object into an array of valid React elements.
Why?
Error objects are not valid as a react child. When you try to render an error, you get this error message. So why is this happening?
The error object is not a valid React element

This error usually occurs when you’re trying to render a component that doesn’t return a valid React element. For example, if you forget to add the div wrapper around your component, you’ll get this error.

One way to fix this is to make sure that your component always returns a valid React element. You can use the React.Fragment component to wrap multiple elements in a single, top-level element:

const MyComponent = () => (
  <React.Fragment>
    <div>First element</div>
    <div>Second element</div>
  </React.Fragment>
);

The error object does not have a render function

The error object does not have a render function, so it cannot be rendered by React. To fix this, make sure that the component you are trying to render has a render function.

How to fix it?

If you are coding in React and getting the error message “error objects are not valid as a react child”, there is most likely a problem with how you are passing props to your component. This error can be fixed by passing the props in the correct format.

Wrap the error object in a valid React element

If you’re seeing the error object is not valid as a React child, you’re probably using useEffect() or useLayoutEffect() without passing an dependencies array as the second argument.

To fix it, simply pass an empty array [] as the second argument to useEffect() or useLayoutEffect(), like this:

useEffect(() => {
// …
}, []);

This ensures that your effect callback will only run once (on mount), and not on every re-render.

Use the error boundary component

If you’re using React 16, you can use the error boundary component to catch errors in your components. Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the broken component.

To create an error boundary component, extend the React.Component class like so:

class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}

static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI.
return { hasError: true };
}

componentDidCatch(error, errorInfo) {
// You can also log the error to an error reporting service here

logErrorToService(error, errorInfo);

}

render() {
if (this.state.hasError) {
// You can render any custom fallback UI here

  return <h1>Something went wrong.</h1>;
}

return this.props.children;   // The initial presentational UI, or other children to render as normal!

} }

The invent labs

Error objects are not valid as a react child