Context Patterns Exercises

The wrapper renders its own content instead of children.

Acceptance criteria

1.#value should show dark.

Prev Next

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

const ThemeContext = React.createContext("light")

function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">nothing</ThemeContext.Provider>
}

function Child() {
  return <p id="value">{React.useContext(ThemeContext)}</p>
}

function App() {
  return (
    <ThemeProvider>
      <Child />
    </ThemeProvider>
  )
}
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 provider that drops its children — find the bug

Acceptance criteria