Why we place data in a parent component passing them down to child components with props, instead of placing data directly into the child components?

Question

Hope the question is clear enough (sorry, but english is not my first language).

I will write an example. Consider two components Product and ProductList

class ProductList extends React.Component { 
   render() { 
      data = {title:"Iphone", description: "The most sold smartphone"};
      return ( 
         <div className='productList'> 
            <Product title={data.title} description={data.description} /> 
         </div> 
      ); 
   } 
} 

class Product extends React.Component { 
   render() { 
      return ( 
         <div className='item'>
            <div className='description'> 
               <a>{this.props.title}</a> 
               <p>{this.props.description}</p>
            </div> 
         </div> 
      ); 
   } 
}

ReactDOM.render( <ProductList />, document.getElementById('content') );

This kind of example is very common in tutorial and guides about React. It shows a parent component and a child component, with the parent component containing some data (for simplicity they are just store in an object data) and a child component receiving data from the parent component.

I just notice that data usefull only to a child component are often placed inside the parent component and then passed down through the props. Why in most of the React examples data are placed in the parent/root component and then passed down with props? Wouldn't it be easier to place data directly in the child component avoiding to use props?

Please read through this answer https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693, I am sure it answers your question as well — Shubham Khatri, Jan 05 '18 at 14:16
Possible duplicate of [ReactJS - Lifting state up vs keeping a local state](https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state) — Kraylog, Jan 05 '18 at 14:17
@ShubhamKhatri your answer is about state, here I'm just talking about props — marco, Jan 05 '18 at 14:32
@Kraylog do you see any mention to the concept of "state" in my question? — marco, Jan 05 '18 at 14:33
@marco, the answer isn't about state, its about which data should be present in the component and which should be handed over to the parent and that answer mainly helps you in deciding which data should be stored where — Shubham Khatri, Jan 05 '18 at 14:33
@marco Even in the simple example you gave, there is state hard coded into the render function. Data that is kept somewhere is called State. — Kraylog, Jan 05 '18 at 14:35

score 1 · Answer 1 · edited Jan 05 '18 at 14:34

The truth is that as many dumb components you have, the better. Relying only on data coming from props makes your component dumb.

ProductList in your example will probably need to know a lot about the data like where it is coming from, in what format and so on. It can be wrapped in a High Order Component (HoC) or something so it is definitely smarter.

Think also about testing. If you say that the Product component will fetch the data on its own then you'll have to supply its unit test with a store or maybe React context. As it is right now you just have to initialize it with various props.

Why we place data in a parent component passing them down to child components with props, instead of placing data directly into the child components?

1 Answers1