Advanced
An error boundary with Try again
Complete the ErrorBoundary class: use static getDerivedStateFromError to store the error, and when there is one render <div role="alert"> with the error message and a button id="try-again".
The Try again button must call the onReset prop and then clear the boundary's error, so the children render again.
Clicking #break makes Widget throw Widget crashed. The heading #title and the #break button are outside the boundary and must stay on screen.
What Check tests
- At the start the widget works
- After
#break, an alert shows the message and the heading stays #try-againbrings the widget back- The boundary uses
getDerivedStateFromError
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.