[Typo]: Inconsistent and unclear use of context provider in “Passing Data Deeply with Context”

[a-gunderin]

Summary

The example in the “Passing Data Deeply with Context” page uses <LevelContext value={level}> instead of the standard <LevelContext.Provider value={level}>. Since LevelContext is created with createContext(), this usage is misleading — unless a custom wrapper component is being used (which is not shown or explained). This inconsistency may confuse readers, especially since the next page demonstrates the correct usage with .Provider.

Page

https://react.dev/learn/passing-data-deeply-with-context

Details

In the code example under the section “Passing Data Deeply with Context,” context is provided like this:

<LevelContext value={level}>
  {children}
</LevelContext>

This is misleading because LevelContext is created using createContext(), and in normal usage, context values must be provided using the .Provider property:

<LevelContext.Provider value={level}>
  {children}
</LevelContext.Provider>

Without a wrapper component that encapsulates this behavior (which is not shown or explained), the current example appears to be incorrect or at least confusing. It may mislead new users into thinking context can be used directly like a component.

Please either:

• Update the example to use the standard syntax with .Provider, or

• If this is meant to be a custom wrapper component, explicitly show how LevelContext was defined (i.e. as a wrapper that uses LevelContext.Provider under the hood).

Additional context:

This inconsistency becomes more apparent in the next page in the docs, Scaling Up with Reducer and Context, where context is used in the standard and correct form:

<TasksContext.Provider value={tasks}>
  <TasksDispatchContext.Provider value={dispatch}>
    ...
  </TasksDispatchContext.Provider>
</TasksContext.Provider>

Thank you for the awesome work on the new docs — just trying to help make it even more clear!

[rickhanlonii]

The docs are on version 19.0, and in 19 we allow providing context using <Context> without the .Provider. You can see that the .Provider is used in the 18.react.dev docs for this page.

We should probably add a note to the createContext page to explain that Provider is no longer needed. @a-gunderin do you want to submit that?

For the inconsistency with the other page, we're going to remove all of the .Providers in this PR: #7793