`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together components using and providing *that particular* context. One component may use or provide many different contexts without a problem.
+In CSS, different properties like `color` and `background-color` don't override each other. You can set all `
`'s `color` to red without impacting `background-color`. Similarly, **different React contexts don't override each other.** Each context that you make with `createContext()` is completely separate from other ones, and ties together Components using and providing *that particular* context. One Component may use or provide many different contexts without a problem.
## Before you use context {/*before-you-use-context*/}
@@ -846,31 +846,31 @@ Context is very tempting to use! However, this also means it's too easy to overu
Here's a few alternatives you should consider before using context:
-1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your components are not trivial, it's not unusual to pass a dozen props down through a dozen components. It may feel like a slog, but it makes it very clear which components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
-2. **Extract components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate components that don't use that data (and only pass it further down), this often means that you forgot to extract some components along the way. For example, maybe you pass data props like `posts` to visual components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the component specifying the data and the one that needs it.
+1. **Start by [passing props.](/learn/passing-props-to-a-component)** If your Components are not trivial, it's not unusual to pass a dozen props down through a dozen Components. It may feel like a slog, but it makes it very clear which Components use which data! The person maintaining your code will be glad you've made the data flow explicit with props.
+2. **Extract Components and [pass JSX as `children`](/learn/passing-props-to-a-component#passing-jsx-as-children) to them.** If you pass some data through many layers of intermediate Components that don't use that data (and only pass it further down), this often means that you forgot to extract some Components along the way. For example, maybe you pass data props like `posts` to visual Components that don't use them directly, like `
`. Instead, make `Layout` take `children` as a prop, and render `
`. This reduces the number of layers between the Component specifying the data and the one that needs it.
If neither of these approaches works well for you, consider context.
## Use cases for context {/*use-cases-for-context*/}
-* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in components that need to adjust their visual look.
-* **Current account:** Many components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
+* **Theming:** If your app lets the user change its appearance (e.g. dark mode), you can put a context provider at the top of your app, and use that context in Components that need to adjust their visual look.
+* **Current account:** Many Components might need to know the currently logged in user. Putting it in context makes it convenient to read it anywhere in the tree. Some apps also let you operate multiple accounts at the same time (e.g. to leave a comment as a different user). In those cases, it can be convenient to wrap a part of the UI into a nested provider with a different current account value.
* **Routing:** Most routing solutions use context internally to hold the current route. This is how every link "knows" whether it's active or not. If you build your own router, you might want to do it too.
-* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant components without too much hassle.
+* **Managing state:** As your app grows, you might end up with a lot of state closer to the top of your app. Many distant Components below may want to change it. It is common to [use a reducer together with context](/learn/scaling-up-with-reducer-and-context) to manage complex state and pass it down to distant Components without too much hassle.
-Context is not limited to static values. If you pass a different value on the next render, React will update all the components reading it below! This is why context is often used in combination with state.
+Context is not limited to static values. If you pass a different value on the next render, React will update all the Components reading it below! This is why context is often used in combination with state.
-In general, if some information is needed by distant components in different parts of the tree, it's a good indication that context will help you.
+In general, if some information is needed by distant Components in different parts of the tree, it's a good indication that context will help you.
-* Context lets a component provide some information to the entire tree below it.
+* Context lets a Component provide some information to the entire tree below it.
* To pass context:
1. Create and export it with `export const MyContext = createContext(defaultValue)`.
- 2. Pass it to the `useContext(MyContext)` Hook to read it in any child component, no matter how deep.
+ 2. Pass it to the `useContext(MyContext)` Hook to read it in any child Component, no matter how deep.
3. Wrap children into `` to provide it from a parent.
-* Context passes through any components in the middle.
-* Context lets you write components that "adapt to their surroundings".
+* Context passes through any Components in the middle.
+* Context lets you write Components that "adapt to their surroundings".
* Before you use context, try passing props or passing JSX as `children`.
@@ -879,9 +879,9 @@ In general, if some information is needed by distant components in different par
#### Replace prop drilling with context {/*replace-prop-drilling-with-context*/}
-In this example, toggling the checkbox changes the `imageSize` prop passed to each `
`. The checkbox state is held in the top-level `App` component, but each `` needs to be aware of it.
+In this example, toggling the checkbox changes the `imageSize` prop passed to each ``. The checkbox state is held in the top-level `App` Component, but each `` needs to be aware of it.
-Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` component directly to `PlaceImage`.
+Currently, `App` passes `imageSize` to `List`, which passes it to each `Place`, which passes it to the `PlaceImage`. Remove the `imageSize` prop, and instead pass it from the `App` Component directly to `PlaceImage`.
You can declare context in `Context.js`.
@@ -1020,7 +1020,7 @@ li {
-Remove `imageSize` prop from all the components.
+Remove `imageSize` prop from all the Components.
Create and export `ImageSizeContext` from `Context.js`. Then wrap the List into `` to pass the value down, and `useContext(ImageSizeContext)` to read it in the `PlaceImage`:
@@ -1157,7 +1157,7 @@ li {
-Note how components in the middle don't need to pass `imageSize` anymore.
+Note how Components in the middle don't need to pass `imageSize` anymore.
diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
index aae682d14d2..a2fcb6a1717 100644
--- a/src/content/learn/passing-props-to-a-component.md
+++ b/src/content/learn/passing-props-to-a-component.md
@@ -4,16 +4,16 @@ title: Passing Props to a Component
-React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.
+React Components use *props* to communicate with each other. Every parent Component can pass some information to its child Components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, and functions.
-* How to pass props to a component
-* How to read props from a component
+* How to pass props to a Component
+* How to read props from a Component
* How to specify default values for props
-* How to pass some JSX to a component
+* How to pass some JSX to a Component
* How props change over time
@@ -51,11 +51,11 @@ body { min-height: 120px; }
-The props you can pass to an `![]()
` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* components, such as ``, to customize them. Here's how!
+The props you can pass to an `![]()
` tag are predefined (ReactDOM conforms to [the HTML standard](https://www.w3.org/TR/html52/semantics-embedded-content.html#the-img-element)). But you can pass any props to *your own* Components, such as ``, to customize them. Here's how!
-## Passing props to a component {/*passing-props-to-a-component*/}
+## Passing props to a Component {/*passing-props-to-a-component*/}
-In this code, the `Profile` component isn't passing any props to its child component, `Avatar`:
+In this code, the `Profile` Component isn't passing any props to its child Component, `Avatar`:
```js
export default function Profile() {
@@ -67,7 +67,7 @@ export default function Profile() {
You can give `Avatar` some props in two steps.
-### Step 1: Pass props to the child component {/*step-1-pass-props-to-the-child-component*/}
+### Step 1: Pass props to the child Component {/*step-1-pass-props-to-the-child-component*/}
First, pass some props to `Avatar`. For example, let's pass two props: `person` (an object), and `size` (a number):
@@ -88,9 +88,9 @@ If double curly braces after `person=` confuse you, recall [they're merely an ob
-Now you can read these props inside the `Avatar` component.
+Now you can read these props inside the `Avatar` Component.
-### Step 2: Read props inside the child component {/*step-2-read-props-inside-the-child-component*/}
+### Step 2: Read props inside the child Component {/*step-2-read-props-inside-the-child-component*/}
You can read these props by listing their names `person, size` separated by the commas inside `({` and `})` directly after `function Avatar`. This lets you use them inside the `Avatar` code, like you would with a variable.
@@ -168,9 +168,9 @@ body { min-height: 120px; }
-Props let you think about parent and child components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`.
+Props let you think about parent and child Components independently. For example, you can change the `person` or the `size` props inside `Profile` without having to think about how `Avatar` uses them. Similarly, you can change how the `Avatar` uses these props, without looking at the `Profile`.
-You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your component! React component functions accept a single argument, a `props` object:
+You can think of props like "knobs" that you can adjust. They serve the same role as arguments serve for functions—in fact, props _are_ the only argument to your Component! React Component functions accept a single argument, a `props` object:
```js
function Avatar(props) {
@@ -237,7 +237,7 @@ function Profile({ person, size, isSepia, thickBorder }) {
}
```
-There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax:
+There's nothing wrong with repetitive code—it can be more legible. But at times you may value conciseness. Some Components forward all of their props to their children, like how this `Profile` does with `Avatar`. Because they don't use any of their props directly, it can make sense to use a more concise "spread" syntax:
```js
function Profile(props) {
@@ -251,7 +251,7 @@ function Profile(props) {
This forwards all of `Profile`'s props to the `Avatar` without listing each of their names.
-**Use spread syntax with restraint.** If you're using it in every other component, something is wrong. Often, it indicates that you should split your components and pass children as JSX. More on that next!
+**Use spread syntax with restraint.** If you're using it in every other Component, something is wrong. Often, it indicates that you should split your Components and pass children as JSX. More on that next!
## Passing JSX as children {/*passing-jsx-as-children*/}
@@ -263,7 +263,7 @@ It is common to nest built-in browser tags:
```
-Sometimes you'll want to nest your own components the same way:
+Sometimes you'll want to nest your own Components the same way:
```js
```
-When you nest content inside a JSX tag, the parent component will receive that content in a prop called `children`. For example, the `Card` component below will receive a `children` prop set to `
` and render it in a wrapper div:
+When you nest content inside a JSX tag, the parent Component will receive that content in a prop called `children`. For example, the `Card` Component below will receive a `children` prop set to `