Error Boundaries Exercises

Without a boundary the throw unmounts the whole tree.

Acceptance criteria

1.#value should show Something went wrong.

Prev Next

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

class Boundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { failed: false }
  }
  static getDerivedStateFromError() {
    return { failed: true }
  }
  render() {
    if (this.state.failed) return <p id="value">Something went wrong</p>
    return this.props.children
  }
}

function Risky() {
  throw new Error("boom")
}

function App() {
  return <Risky />
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App />)

0 × 0

Output ready when you are

Press Run to render your code, or Submit to validate your solution.

Fix the missing boundary — find the bug

Acceptance criteria