CODEWITHSUNDEEP
reactjsreact-native
John
John

Reputation: 51

Trigger a function that is inside the child component from the parent

How can I trigger a function that is inside the child component from the parent component doing it in the same style as drawer navigation.

They do it like this: this.props.navigation.toggleDrawer(); from the parent

How can I do the same?

Upvotes: 2

Views: 6505

Answers (3)

Samiksha Jagtap
Samiksha Jagtap

Reputation: 603

class Parent extends React.Component {
 parentFunction() {
   this.refs.chid.childFunction(parameterToPassed);
 }

 render () {
   return(
     {/* ... */}
     <Child ref='child' />
     {/* ... */}
   )
  }
}

class Child extends React.Component {
  childFunction(text){
    console.log('parameter Passed from parent: ', text);
  }

  render() {
    return(
      {/* ... */}
    )
  }
}

Function named as childFunction is declared in child component. and called in parent component, inside the function parentFunction.

for more information Call child function from parent component in React Native

Upvotes: 0

Aseem Upadhyay
Aseem Upadhyay

Reputation: 4557

Since you haven't provided any code. Here are my thoughts on the problem.

When you list down a component in a navigator, be it StackNavigator or DrawerNavigator, the component will receive some props provided by the navigation class itself.

There's an option to send more parameters as props to these navigation objects. Among these extra parameters, can be your one method toggleDrawer().

Also, if you parent component is listed in the navigator and the child component is not. You'll need to explicitly pass the navigation props (this.props.navigation) to the child component. So, when you are inside that child component, all you gotta do is fetch those props and voila, it'll do the needful!

Hope this clarifies out stuff for you.

EDIT --- For your third comment

Assumptions:

  1. Parent component is listed as DrawerNavigator({ParentScreen: {screen: ParentScreen}})
  2. There is a <Route/> component in ParentScreen.

So, what you can do is pass the default navigation props to the <Route> component.

Like - <Route navigation={this.props.navigation} /> and in child component, you can trigger this.props.navigation.toggleDrawer() on any onPress() event of any element.

Upvotes: 0

bennygenel
bennygenel

Reputation: 24680

If I understood your question correctly, I think you mixed up thing a bit. The example you are showing is an example for triggering a parent component's function from child.

I'll try to clear things up a bit with 2 examples.

1) Trigger from child:

To trigger a function of a parent component from a child you can just pass the function as a property to the child component and run it when you need it.

class Parent extends React.Component {
  someFunction = (text) => {
    console.log('Message from child: ', text);
  }
  render () {
    return(
      <Child someProperty={this.someFunction} />
    )
  }
}

class Child extends React.Component {
  _onPress = () => {
    // check if the property is defined and not null
    if(this.props.someProperty) {
      // run the function that is passed from the parent
      this.props.someProperty();
    }
  }
  render() {
    return(
      <Button onPress={this._onPress} title="Click Me"/>
    )
  }
}

2) Trigger from parent:

To trigger a function on a child component from parent, you can pass a property that changes when some action happens on the parent component. This will trigger a re-render (in most cases, for more info please take a look at shouldComponentUpdate) in child component. You can check the property changes and then do what you need to do in child component.

class Parent extends React.Component {
  state = {
    someParameter: 'someInitialValue',
  }
  someFunction = (text) => {
    this.setState({ someParameter: 'someValue' });
  }
  render () {
    return(
      <Child someProperty={this.state.someParameter} />
    )
  }
}

class Child extends React.Component {
  someFunction = (text) => {
    console.log('Message from parent: ', text);
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    // Check if the suplied props is changed
    if(prevProps.someProperty !== this.props.someProperty) {
      // run the function with the suplied new property
      this.someFunction(this.props.someProperty);
    }
  }
  render() {
    return(
      {/* ... */}
    )
  }
}

Upvotes: 3

Related Questions