I can't figure out a good way to reset an ErrorBoundary from outside the component. Due to the UI design of the application, I have a "Retry" button outside of the ErrorBoundary component which when clicked should reset the error state within the ErrorBoundary.

For example, I have a fairly standard ErrorBoundary:

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

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.error(error);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children; 
  }
}

And in my main App, I have something along this:

const BadComponent = (props) => {
   return (
      <button onClick={() => {
         throw new Error("Something happened!")
      }}>Trigger Error</button>
   );
}

function App() {
  return (
    <div>
      <button onClick={() => {
         // How to reset ErrorBoundary here when button is clicked?
      }}>Retry again</button>

      <ErrorBoundary>
        <BadComponent />
      </ErrorBoundary>
    </div>
  )
}

From the example above, I have a BadComponent that will throw an error when it's clicked. I also have a Retry button in my main App component that is supposed to reset the error state within ErrorBoundary so that it re-renders the children (which is the BadComponent) again.

However, the error state is within the ErrorBoundary component and I can't directly control the error state from outside of it. I can't pass a props into ErrorBoundary for the error state too because the error in this case is caught and managed by and within the ErrorBoundary component and not by the App component.

If I do use a prop just to indicate whether the error should be reset, I will have to maintain the error state and another error prop within the ErrorBoundary and make sure they are consistent which feels awkward.

So, how can I reset the error state of the ErrorBoundary component? It will be great if there is an example of how I should do it.