From 4d5174146300d0f6cabe87987fd1a20175d40edc Mon Sep 17 00:00:00 2001 From: Sunil <84917190+sunil-sharma-999@users.noreply.github.com> Date: Thu, 7 Jul 2022 22:33:59 +0530 Subject: [PATCH] fix typo in passing-data-deeply-with-context.md (#4795) * fix typo in passing-data-deeply-with-context.md * Fix: typo --- beta/src/pages/learn/passing-data-deeply-with-context.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/beta/src/pages/learn/passing-data-deeply-with-context.md b/beta/src/pages/learn/passing-data-deeply-with-context.md index f33df34e..0b8246a4 100644 --- a/beta/src/pages/learn/passing-data-deeply-with-context.md +++ b/beta/src/pages/learn/passing-data-deeply-with-context.md @@ -106,7 +106,7 @@ export default function Heading({ level, children }) { -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: @@ -205,7 +205,7 @@ But how can the `` component know the level of its closest `
`? 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); -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 `

`. 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 `
`. 2. `Section` wraps its children into ``. -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*/}