Browse Source

"Thinking in React": fix list formatting

main
Andrey Popp 11 years ago
parent
commit
0d758e0800
  1. 2
      _posts/2013-11-05-thinking-in-react.md

2
_posts/2013-11-05-thinking-in-react.md

@ -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: 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: For each piece of state in your application:
* Identify every component that renders something based on that state. * 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). * 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. * 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. * 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: 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. * `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`. * The common owner component is `FilterableProductTable`.
* It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable` * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`

Loading…
Cancel
Save