How do I pass parent state to its child components?

Question

I am new in React ES6 and I think I am modifying the state in a wrong way. My code is like this when I set state on parent component:

class App extends React.Component  {
constuctor(props)  {
     super(props);
     this.state = {name:"helloworld"};
}
 render() { 
  return( 
   <ChildComponent parentObj={this} /> // parentObj for parent context as props on child components  
  ); 
 } 
}

My problem is in other child components, I have to do it repeatitively, is there another way of doing it? I have no problem with React.createClass, but I want to code in es6 so i have this problem.

[Lifting State Up](https://facebook.github.io/react/docs/lifting-state-up.html) and [Thinking in React](https://facebook.github.io/react/docs/thinking-in-react.html) will show you the more idiomatic way of doing these sorts of things. — Joe Clay, Jan 16 '17 at 15:28

score 35 · Accepted Answer · edited Jul 25 '19 at 08:19

If you wanna pass the state {name:"helloworld"} do it like that:

class App extends React.Component {
constuctor(props)  {
     super(props);
     this.state = {name:"helloworld"};
}
 render() { 
  return( 
   <ChildComponent {...this.state} /> 
  ); 
 } 
}

and in the child component you can do:

<Text>{this.props.name}</Text>

But If you want to pass the props of the component to it's child:

   class App extends React.Component {
    constuctor(props)  {
         super(props);
         this.state = {name:"helloworld"};
    }
     render() { 
      return( 
       <ChildComponent {...this.props} />
      ); 
     } 
    }

and in the child component you can do:

<Text>{this.props.stuff}</Text>//place stuff by any property name in props

Now if you want to update the state of parent component from the child component you will need to pass a function to the child component:

 class App extends React.Component {
    constuctor(props)  {
         super(props);
         this.state = {name:"helloworld"};
    }
    update(name){
       this.setState({name:name})// or with es6 this.setState({name})
    }
    render() { 
     return( 
      <ChildComponent {...this.props, update: this.update.bind(this)} />
     ); 
    } 
  }

and then in child component you can use this : this.props.update('new name')

UPDATE

use more es6 and removed constructor

class App extends React.Component {
    state = {name:"helloworld"};

    // es6 function, will be bind with adding .bind(this)
    update = name => {
       this.setState({name:name})// or with es6 this.setState({name})
    }

    render() { 
     // notice that we removed .bind(this) from the update
     return(
     //send multiple methods using ','
      <ChildComponent {...this.props, update = this.update} />
     ); 
    } 
  }

I understand this, but can I make state changes from child components? — gpbaculio, Jan 16 '17 at 17:17
not directly, you can pass a function, let's say call it update, I will edit the answer to show you! — challenger, Jan 17 '17 at 09:15
sorry, I was passing the method as props but I didn't know you can use bind and this on it,I was using it on constructor. Thank you! :) — gpbaculio, Jan 17 '17 at 13:54
@challenger hey! this was a great thorough answer. but I'm having some trouble implementing your suggestions, would really appreciate it if you could take a quick look here! https://stackoverflow.com/questions/48970200/react-native-trouble-passing-parents-state-to-child — SpicyClubSauce, Feb 25 '18 at 05:07
what is the parent's state was changed and you want the child to know? for example some Boolean in the state changed. — vsync, Aug 22 '18 at 08:46
{...this.props, update: this.update} - i'm having a compilation error, when trying to add update prop. though {...this.props} update={this.update} works as expected. Is this a typo, or some babel magic? — tylik, Oct 22 '18 at 22:11

score 0 · Answer 2 · answered Jan 16 '17 at 15:06

0

if you want to send the whole state :

return( <ChildComponent {...this.state} /> );

But this is likely a bad idea :)

edit: in your scenario, this sends a 'name' property to child component with value 'helloworld'

answered Jan 16 '17 at 15:06

Ji aSH

3,206
1
10
18

yes, i Understand that it send 'name' property but I have to do that so i can use this.setState on child components, it works, but somehow I think it's the 'wrong' way – gpbaculio Jan 16 '17 at 15:11
why is that a bad idea? – gpbaculio Jan 16 '17 at 15:33
1

If you send the state from parent down to children repeatitively, then your component model is probably not that good :) – Ji aSH Jan 16 '17 at 16:18
So what's the alternative @Ji aSH ? If a parent has a large number of items in state (large arrays included) that are not needed in the child, how do you send just, say, 5 parent state items to a child? – Kelvin Aitken Sep 03 '19 at 19:41
@KelvinAitken I don't think it is a good idea to pass {...this.state} to the children. What about if instead you group them in an object and pass the object to the children – CarlosZ Oct 10 '19 at 06:06
@challenger - How would you do this in TypeScript? – NightTom Nov 21 '19 at 13:06

How do I pass parent state to its child components?

2 Answers2

Linked