import React, { Component } from "react";
class ErrorBoundary extends Component {
state = {
hasError: false,
errorMessage: ""
};
componentDidCatch = (error, info) => {
this.setState({ hasError: true, errorMessage: error });
};
render() {
if (this.state.hasError) {
return <h1>{this.state.errorMessage}</h1>;
} else {
return this.props.children;
}
}
}
export default ErrorBoundary;
import React from "react";
import classes from "./Person.css";
const person = props => {
const rnd = Math.random();
if (rnd > 0.7) {
throw new Error("Something went wrong");
}
return (
...
);
};
export default person;
return (
<ErrorBoundary key={person.id}>
<Person
name={person.name}
age={person.age}
click={() => this.deletePersonalHandler(index)}
//нужно для реакта, чтобы он более еффективно ререндерил компоненты, значение должно быть уник
changed={event => this.nameChangedHandler(event, person.id)}
>
{index}
</Person>
</ErrorBoundary>
);