Snippet

Sharing State with Context API

The Context API provides a way to pass data through the component tree without having to manually pass props down through every level (prop drilling).

snippet.js

javascript

const ThemeContext = React.createContext('light');
 
function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Layout />
    </ThemeContext.Provider>
  );
}
 
function Layout() {
  const theme = React.useContext(ThemeContext);
  return <div className={`theme-${theme}`}>The current theme is {theme}</div>;
}

react

Breakdown

React.createContext('light')

Initializes a context object with a default value of 'light'.

ThemeContext.Provider value="dark"

Provides the value 'dark' to all descendants in the component tree.

React.useContext(ThemeContext)

Consumes the current value from the nearest matching Provider above in the tree.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Sharing State with Context API

Related