Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to call a parent function from a child - react-native

I'm struggling to find a solution to my problem , but i cannot find it anywhere . So my question is how to call a parent function from a child . The function has to be passed in a onPress={()} inside the child

Parent.js

   constructor(props) {
    super(props);
    this.state = { loading: true };
    this.state = { active: 'active' };
    this.openDrawer = this.openDrawerButtonFunction.bind(this);
    this.callParent = this.callParent.bind(this)

       }

     callParent = () => {
     console.log('I am your father')   }

Child.js

     <Avatar
      avatarStyle={{ height: 50 }}
      onPress={() => { this.onPressAvatar() }}
      source={require('../../assets/images/dav-r.jpeg')} />

      onPressAvatar = () => {
      console.log('press on avatar');
        this.props.callParent.bind(this)

}

like image 785
PandaMastr Avatar asked Jan 09 '19 14:01

PandaMastr


People also ask

How do you call a parent method from a child?

Call Parent Component method from Child Component For Calling Parent Component method from Child Component, I had created a method getParentMethod and in this method, I had set input property in HTML file of parent component. Then shown as below code inside the child component I am able to access parent method.

How do you call a child class function from parent class in react native?

How to call child component function from parent component in React Native? To call child component function from parent component in React Native, we can use the useImperativeHandle hook. to create the Child component with forWardRef with a function that takes the props and ref .

How do you get parent data from a child in react?

Firstly, let's pass data between a parent component and a child component. . First, you'll need to create two components, one parent and one child. Next, you'll import the child component in the parent component and return it. Then you'll create a function and a button to trigger that function.


3 Answers

This is a common mis-understanding, so you're in good hands.

You're going to utilize Props to accomplish calling a parent function to a child.

Naturally, the child knows not of the parent's functions. When you need to do something in the child Component, and bubble it up to the parent function, you just need to pass the function as a prop.

Example

ParentComponent.js

...

doSomething(x){
   console.log(x);
}

render(){
   return(
      <ChildComponent functionPropNameHere={this.doSomething}/>
   )
}

ChildComponent.js

someFunctionInChildComponent(){
   this.props.functionPropNameHere('placeholder for x');
}

When you run the function someFunctionInChildComponent(), it will call the Prop called functionPropNameHere which then moves to the parent component to call the function there. The input x will be placeholder for x in this example.

like image 55
Nikush Avatar answered Oct 19 '22 15:10

Nikush


In the parent render function

parentfunction(info){
   alert(info)
}


render(){
      return(
       //bla bla bla
       <Child functionToPass={this.parentfunction}/>
       //bla bla bla
      )
    }

In the child

callparentfunction(){
this.props.functiontoPass('Hello from the child')
}
like image 39
ValdaXD Avatar answered Oct 19 '22 16:10

ValdaXD


You have to pass the parent function as a prop to the child. More info here

like image 1
Carlos Avatar answered Oct 19 '22 16:10

Carlos