A context value is the data supplied through a React context provider and read by components below it. It can be a list, object, function, or stateful value. Components use useContext to read the current value without receiving it through every intermediate component. section 11.4.2 section 11.5.2
Build a context value in three steps:
- Create and export a context with createContext, choosing a useful default such as an empty list. section 11.4.2
- Wrap the relevant component subtree in Context.Provider and pass the current data through its value property. section 11.4.2
- Call useContext inside a descendant component to read the value. section 11.4.2
- Use an object when the provider must expose several values, such as data and functions. section 11.5.2
Sharing a selected user
const NameContext = createContext(); function UserButton() { const name = useContext(NameContext); return <button>👤 {name}</button>; } function AdminDashboard() { const [name, setName] = useState('Alice'); return ( <NameContext.Provider value={name}> <select value={name} onChange={event => setName(event.target.value)}> <option>Alice</option> <option>Bob</option> <option>Carol</option> </select> <UserButton /> </NameContext.Provider> ); } When name changes, components using the context value re-render automatically, so the dashboard can update its menu and headline together. section 10.1.2
const value = {
someValue, #1
someFunction, #2
);
return (
<Context.Provider value={value}>
...
</Context.Provider>
);
An object context value can expose several related values through one provider, including state and functions. section 11.5.2
