amirho/react.dev
1
0
Fork 0
mirror of https://github.com/reactjs/react.dev.git synced 2026-02-25 23:05:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix typo in passing-data-deeply-with-context.md (#4795)

Browse Source 
* fix typo in passing-data-deeply-with-context.md

* Fix: typo
This commit is contained in:
Sunil
2022-07-07 22:33:59 +05:30
committed by GitHub
parent ee7705675d
commit 4d51741463
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
beta/src/pages/learn/passing-data-deeply-with-context.md
View File

@@ -106,7 +106,7 @@ export default function Heading({ level, children }) {
</Sandpack>
Let's say you want multiple headers within the same `Section` to always have the same size:
Let's say you want multiple headings within the same `Section` to always have the same size:
<Sandpack>
@@ -205,7 +205,7 @@ But how can the `<Heading>` component know the level of its closest `<Section>`?
You can't do it with props alone. This is where context comes into play. You will do it in three steps:
1. **Create** a context. (You can call it `LevelContext`, since it's for the heading level.)
2. **Use** that context from the component that needs the data. (`Header` will use `LevelContext`.)
2. **Use** that context from the component that needs the data. (`Heading` will use `LevelContext`.)
3. **Provide** that context from the component that specifies the data. (`Section` will provide `LevelContext`.)
Context lets a parent--even a distant one!--provide some data to the entire tree inside of it.
@@ -442,7 +442,7 @@ export const LevelContext = createContext(1);
</Sandpack>
Notice this example doesn't quite work, yet! All the headers have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it!
Notice this example doesn't quite work, yet! All the headings have the same size because **even though you're *using* the context, you have not *provided* it yet.** React doesn't know where to get it!
If you don't provide the context, React will use the default value you've specified in the previous step. In this example, you specified `1` as the argument to `createContext`, so `useContext(LevelContext)` returns `1`, setting all those headings to `<h1>`. Let's fix this problem by having each `Section` provide its own context.
@@ -568,7 +568,7 @@ It's the same result as the original code, but you did not need to pass the `lev
1. You pass a `level` prop to the `<Section>`.
2. `Section` wraps its children into `<LevelContext.Provider value={level}>`.
3. `Header` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
3. `Heading` asks the closest value of `LevelContext` above with `useContext(LevelContext)`.
## Using and providing context from the same component {/*using-and-providing-context-from-the-same-component*/}