How to use React Context

Learn how to use a React context to pass data to subcomponents.

What do you need to complete this tutorial?

Create a new React project

npx create-react-app context --template typescript

Replace src/App.tsx with the following

import * as React from 'react';
import {useContext} from 'react';
import './App.css';

interface User {
name: string;
}

const UserContext = React.createContext<User>({name: 'anonymous'})

const Greeting: React.FC = () => {
const user = useContext(UserContext)
return <div>Hello {user.name}!</div>
}

function App() {

const user: User = {
name: 'Clara',
}

return (
<div className="App">
{/* Uses default value 'anonymous' */}
<Greeting/>

      <UserContext.Provider value={user}>
        {/* Uses provided value 'Clara' */}
        <Greeting/>
      </UserContext.Provider>
    </div>
);
}

export default App;

Start it and open http://localhost:3000/ to see the different greetings.

How to use React Context

Further reading