From 23b1f4c7ba067664649138f034a722495e843c2f Mon Sep 17 00:00:00 2001 From: Alex Krolick Date: Thu, 5 Apr 2018 10:37:57 -0700 Subject: [PATCH 1/3] Clarify when Consumers get the default value --- content/docs/context.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/content/docs/context.md b/content/docs/context.md index 1785cd2dfa2..ecdb1c7a628 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -47,7 +47,7 @@ const {Provider, Consumer} = React.createContext(defaultValue); Creates a `{ Provider, Consumer }` pair. -Optionally accepts a default value to be passed to Consumers without a Provider ancestor. +Optionally accepts a default value to be passed to Consumers without a Provider ancestor. _Only Consumers that don't have a Provider higher in the tree receive the default value_. ### `Provider` @@ -59,6 +59,10 @@ A React component that allows Consumers to subscribe to context changes. Accepts a `value` prop to be passed to Consumers that are descendants of this Provider. One Provider can be connected to many Consumers. Providers can be nested to override values deeper within the tree. +> Note: +> +> If `value` is not provided, Consumers receive `undefined`. To use the default value in a Consumer instead, remove the Provider altogether. + ### `Consumer` ```js From b5cf32d7c58971ca1dd08ae6852836902eb7c274 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 6 Apr 2018 15:14:25 +0100 Subject: [PATCH 2/3] Change wording --- content/docs/context.md | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/content/docs/context.md b/content/docs/context.md index ecdb1c7a628..e5afd64b42e 100644 --- a/content/docs/context.md +++ b/content/docs/context.md @@ -45,9 +45,9 @@ Using context, we can avoid passing props through intermediate elements: const {Provider, Consumer} = React.createContext(defaultValue); ``` -Creates a `{ Provider, Consumer }` pair. +Creates a `{ Provider, Consumer }` pair. When React renders a context `Consumer`, it will read the current context value from the closest matching `Provider` above it in the tree. -Optionally accepts a default value to be passed to Consumers without a Provider ancestor. _Only Consumers that don't have a Provider higher in the tree receive the default value_. +The `defaultValue` argument is the context value React uses if you render a `Consumer` without a matching `Provider` above it in the tree. For example, this is helpful for testing components in isolation without wrapping them. ### `Provider` @@ -59,10 +59,6 @@ A React component that allows Consumers to subscribe to context changes. Accepts a `value` prop to be passed to Consumers that are descendants of this Provider. One Provider can be connected to many Consumers. Providers can be nested to override values deeper within the tree. -> Note: -> -> If `value` is not provided, Consumers receive `undefined`. To use the default value in a Consumer instead, remove the Provider altogether. - ### `Consumer` ```js From ae28c24a57ca5371e925a380a5d65bc9eac8ef93 Mon Sep 17 00:00:00 2001 From: Geoffrey Mattie Date: Mon, 9 Mar 2020 15:52:59 -0400 Subject: [PATCH 3/3] Legend Color Label (#900) Replace the superfluous "turquoise" with the more common "cyan". --- content/docs/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md index 53caa2b2081..dfb64ae5ef0 100644 --- a/content/docs/thinking-in-react.md +++ b/content/docs/thinking-in-react.md @@ -46,7 +46,7 @@ You'll see here that we have five components in our simple app. We've italicized 1. **`FilterableProductTable` (orange):** contains the entirety of the example 2. **`SearchBar` (blue):** receives all *user input* 3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input* - 4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category* + 4. **`ProductCategoryRow` (cyan):** displays a heading for each *category* 5. **`ProductRow` (red):** displays a row for each *product* If you look at `ProductTable`, you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and there's an argument to be made either way. For this example, we left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However, if this header grows to be complex (i.e. if we were to add affordances for sorting), it would certainly make sense to make this its own `ProductTableHeader` component.