From 0d758e08005bb18ee026ba7e47e1a126c6b3bbf6 Mon Sep 17 00:00:00 2001 From: Andrey Popp <8mayday@gmail.com> Date: Wed, 6 Nov 2013 03:50:28 +0400 Subject: [PATCH] "Thinking in React": fix list formatting --- _posts/2013-11-05-thinking-in-react.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/_posts/2013-11-05-thinking-in-react.md b/_posts/2013-11-05-thinking-in-react.md index 55107c3c..047b1e04 100644 --- a/_posts/2013-11-05-thinking-in-react.md +++ b/_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: 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`