mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-24 20:53:08 +00:00
"Thinking in React": fix list formatting
This commit is contained in:
@@ -108,12 +108,14 @@ OK, so we've identified what the minimal set of app state is. Next we need to id
|
||||
Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
|
||||
|
||||
For each piece of state in your application:
|
||||
|
||||
* Identify every component that renders something based on that state.
|
||||
* Find a common owner component (a single component above all the components that need the state in the hierarchy).
|
||||
* Either the common owner or another component higher up in the hierarchy should own the state.
|
||||
* If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
|
||||
|
||||
Let's run through this strategy for our application:
|
||||
|
||||
* `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
|
||||
* The common owner component is `FilterableProductTable`.
|
||||
* It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
|
||||
|
||||
Reference in New Issue
Block a user