How to pass data between child and parent in react-native?

Question

module.exports= class APP extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      key1:'key1',
      key2:'key2'
    };
  render() {
    return (
       <View>
          <Button
             onPress={this.goToTisch}>
             1
          </Button>
          <Button
             onPress={this.goToTisch}>
             2
          </Button>
       </View>
    );
  }
}

I just write an app with react-native and do not know how to update the parent state from the child element. thank you in advance

Piotr Białek · Accepted Answer · 2017-01-13 15:37:29Z

24

You need to pass from parent to child callback function, and then call it in the child.

For example:

class Parent extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      show: false
    };
  }
  updateState = () => {
      this.setState({
          show: !this.state.show
      });
  }
  render() {
    return (
        <Child updateState={this.updateState} />
    );
  }
}

class Child extends React.Component {
  handleClick = () => {
      this.props.updateState();
  }
  render() {
    return (
        <button onClick={this.handleClick}>Test</button>
    );
  }
}

answered Jan 13, 2017 at 15:37

Piotr Białek

2,7571 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user6094105 Over a year ago

Thanks! I checked it.

Hugo Over a year ago

I get a bunch of "Cannot update during en existing state transition" when doing this

Muzammil · Accepted Answer · 2018-08-08 07:29:36Z

14

To call Parent's method from child, you can pass the reference like this.

Parent Class

<ChildClass
    onRef={ref => (this.parentReference = ref)}
    parentReference = {this.parentMethod.bind(this)}
/>

parentMethod(data) {

}

Child Class

let data = {
    id: 'xyz',
    name: 'zzz',
};

//This will call the method of parent

this.props.parentReference(data);

edited Aug 8, 2018 at 7:29

answered Jun 26, 2018 at 9:45

Muzammil

1,5391 gold badge15 silver badges24 bronze badges

Comments

Gerard Rovira · Accepted Answer · 2017-01-13 15:32:09Z

4

Like you do with React.

You have to exchange information through props, or use a library like Redux.

answered Jan 13, 2017 at 15:32

Gerard Rovira

33k20 gold badges120 silver badges149 bronze badges

Comments

damianfabian · Accepted Answer · 2017-01-13 15:36:29Z

4

Using Props like this:

Parent:

<Parent>
  <Child onChange={this.change} />
</Parent>

Child:

<button onclick={this.props.onChange('It Changed')} />

With this you can just do whatever you want in your parent.

answered Jan 13, 2017 at 15:36

damianfabian

1,68112 silver badges17 bronze badges

Comments

Sahil Shikalgar · Accepted Answer · 2019-10-20 06:12:37Z

1

This can be achieved by two ways:

Parent Component:

//Needs argument
const addGoalHandler = goalTitle => {
        // code for updating state
}

<GoalInput onAddGoal={this.addGoalHandler} />

Child Component:

Way 1: Using Vanilla Javascript

<Button 
    title="ADD"
    onPress={props.onAddGoal.bind(this, enteredGoal)}
/>

Way 2: Using Arrow Function

<Button 
    title="ADD"
    onPress={() => { props.onAddGoal(enteredGoal) } }
/>

edited Oct 20, 2019 at 6:12

answered Oct 19, 2019 at 15:04

Sahil Shikalgar

83110 silver badges21 bronze badges

Comments

Krzysztof Janiszewski · Accepted Answer · 2018-10-05 11:52:51Z

class Parent extends Component{
   constructor(props){
   super(props);
    this.state={value:''};
    this.getData=this.getData.bind(this);
  }

  getData(val){
   console.log(val);
  this.setState({
    value:val
  });
  }
    render(){
      const {value}=this.state
    return(
      <View>
      <Screen sendData={this.getData}/>
      <View>
        <Text>
    {this.state.value};
    </Text>
      </View>
      </View>
    )
    }
}
export default Parent;


CHILD CLASS:

class Child extends Component{
   componentWillMount(){
    this.props.sendData('data');
   }
    render(){ 
    return(
        <View>  
       </View>
    )
    }  
}
export default Child;

While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value.

Collectives™ on Stack Overflow

How to pass data between child and parent in react-native?

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related