I want to handle error in case that instead valid react child I have an object in prop value. So I add a Error Boundary but still have an error.
Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {})
Why it happens? It's not event handler nor SSR nor async code.
class ErrorBoundary extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
hasError: false,
};
}
componentDidCatch(error, info) {
this.setState({
hasError: true,
});
}
render() {
if (this.state.hasError) {
return '';
}
return <Component {...this.props} />;
}
}
class MyComponent extends React.PureComponent {
constructor(props) {
super(props);
}
render () {
return (<ErrorBoundary> {this.props.value} </ErrorBoundary>);
}
}
As I understood React Error Boundaries can not handle errors from react core. So the solution to avoid "Uncaught Invariant Violation" is put valid data in the props