51

I'm developing my first React Native app. What I'm trying to achieve is to execute a child function from the parent component, this is the situation:

//Child

    export default class Child extends Component {
      ...
      myfunct: function() {
        console.log('Managed!');
      }
      ...
      render(){
        return(
          <Listview
          ...
          />
        );
      }
    }

//Parent

    export default class Parent extends Component {
      ...
      execChildFunct: function() {
        ...
        //launch child function "myfunct"
        ...
        //do other stuff
      }
      
      render(){
        return(
          <View>
            <Button onPress={this.execChildFunct} />
            <Child {...this.props} />
          </View>);
      }
    }

In this example, I would like to log 'Managed!' when I press the button in the parent class. How is it feasible?

7 Answers 7

38

Here's how you can do this with functional components:

Parent

  1. Use useRef() to give the child component a reference in the parent:
const childRef = useRef()
// ...
return (
   <ChildComponent ref={childRef} />
)
...

Child

  1. Pass ref as one of the constructor parameters:
const ChildComponent = (props, ref) => {
  // ...
}
  1. Import useImperativeHandle and forwardRef methods from the 'react' library:
import React, { useImperativeHandle, forwardRef } from 'react'
  1. Use useImperativeHandle to bind functions to the ref object, which will make these functions accessible to the parent

These methods won't be internally available, so you may want to use them to call internal methods.

const ChildComponent = (props, ref) => {
  //...
  useImperativeHandle(ref, () => ({
    // each key is connected to `ref` as a method name
    // they can execute code directly, or call a local method
    method1: () => { localMethod1() },
    method2: () => { console.log("Remote method 2 executed") }
  }))
  //...
  
  // These are local methods, they are not seen by `ref`,
  const localMethod1 = () => {
    console.log("Method 1 executed")
  }
  // ..
}
  1. Export the child component using forwardRef:
const ChildComponent = (props, ref) => {
  // ...
}
export default forwardRef(ChildComponent)

Putting it all together

Child Component

import React, { useImperativeHandle, forwardRef } from 'react';
import { View } from 'react-native'


const ChildComponent = (props, ref) => {
  useImperativeHandle(ref, () => ({
    // methods connected to `ref`
    sayHi: () => { sayHi() }
  }))
  // internal method
  const sayHi = () => {
    console.log("Hello")
  }
  return (
    <View />
  );
}

export default forwardRef(ChildComponent)

Parent Component

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import ChildComponent from './components/ChildComponent';

const App = () => {
  const childRef = useRef()
  return (
    <View>
      <ChildComponent ref={childRef} />
      <Button
        onPress={() => {
          childRef.current.sayHi()
        }}
        title="Execute Child Method"
      />
    </View>
  )
}

export default App

There is an interactive demo of this on Expo Snacks: https://snack.expo.dev/@backupbrain/calling-functions-from-other-components

This explanation is modified from this TutorialsPoint article

1
  • 1
    it says TypeError: undefined is not an object Commented Jan 8, 2022 at 15:08
34

Nader Dabit's answer is outdated, since using String literals in ref attributes has been deprecated. This is how we would do it as of September 2017:

<Child ref={child => {this.child = child}} {...this.props} />
<Button onPress={this.child.myfunc} />

Same functionality, but instead of using a String to reference the component, we store it in a global variable instead.

0
26

You can add a ref to the child component:

<Child ref='child' {...this.props} />

Then call the method on the child like this:

<Button onPress={this.refs.child.myfunc} />
1
  • But execChildFunct has to do also other things: can I call this.refs.child.myfunct in execChildFunct? Because I tried and it didn't work :/ Commented Oct 28, 2016 at 15:32
8

It is in reactjs.

    class Child extends React.Component {
      componentDidMount() {
        this.props.onRef(this)
      }
      componentWillUnmount() {
        this.props.onRef(null)
      }
      method() {
        console.log('do stuff')
      }
      render() {
        return <h1>Hello World!</h1>
      }
    }

    class EnhancedChild extends React.Component {
      render() {
        return <Child {...this.props} />
      }
    }
        
    class Parent extends React.Component {
      onClick = () => {
        this.child.method() // do stuff
      };
      render() {
        return (
          <div>
            <EnhancedChild onRef={ref => (this.child = ref)} />
            <button onClick={this.onClick}>Child.method()</button>
          </div>
        );
      }
    }

    ReactDOM.render(<Parent />, document.getElementById('root'))

Original Solution:

https://jsfiddle.net/frenzzy/z9c46qtv/

https://github.com/kriasoft/react-starter-kit/issues/909

2
  • what is this.child??
    – famfamfam
    Commented Apr 13, 2022 at 9:50
  • In the <EnhancedChild /> we have an onRef={ref=>(this.child = ref)}, meaning that we set this.child to the ref variable. Or said another way, this.child is a reference to the <EnhancedChild /> instance. Commented May 5, 2022 at 22:42
7

Simple and easy way to Parent --> Child function call

    /* Parent.js */
    import React, { Component } from "react";
    import { TouchableOpacity, Text } from "react-native";
    import Child from "./Child";
    
    class Parent extends React.Component {
      onChildClick = () => {
        this.child.childFunction(); // do stuff
      };
      render() {
        return (
          <div>
            <Child onRef={(ref) => (this.child = ref)} />
            <TouchableOpacity onClick={this.onChildClick}>
              <Text>Child</Text>
            </TouchableOpacity>
          </div>
        );
      }
    }
    /* Child.js */
    import React, { Component } from "react";
    
    class Child extends React.Component {
      componentDidMount() {
        this.props.onRef(this);
      }
      componentWillUnmount() {
        this.props.onRef(undefined);
      }
      childFunction() {
        // do stuff
        alert("childFunction called");
      }
      render() {
        return <View>Hello World!</View>;
      }
    }

Original Solution: https://github.com/kriasoft/react-starter-kit/issues/909

4

I think you have misunderstood something about component structure.

Assume that your child is a component which generates button for your other components. In this hierarchy your child has to inform it's parent that it was pressed.

child -----> parent

export default class Child extends Component {
  return (
    <Button onPress={this.props.onPress}/>
  );
}

In your parent component use child component to generate a button for you. In this way, you can use child component in any other components as an independent button.

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.execChildFunct=this.execChildFunct.bind(this);
  }
  execChildFunct: function() {
    console.log('Managed!');
  }
  return (
    <Child onPress={this.execChildFunct}></Child>
  );
}
5
  • Thank you for your answer Burak! I've improved my explanation of the problem, sorry for not being clear: I know what you are talking about, what I'm trying to do is different. The two functions (child and parent) do also other stuff, I've simplified in order to get clearer. Is there a way to access a child component's function directly? Commented Nov 2, 2016 at 8:26
  • What's purpose of bind here? While child onPress already use this, it means calling its method (execChildFunct) . Why we need to bind for this function?
    – TomSawyer
    Commented May 29, 2017 at 13:26
  • @TomSawyer In order to use instance variables in execChildFunct, the function must be binded. In this case I just have log in the function. So binding is not mandatory. Commented May 29, 2017 at 16:26
  • @BurakKarasoy So, it means if we use this inside execChildFunct => this refers to Child instance? Purpose of using binding here is to create function named Child.execChildFunct = Parent.execChildFunct?
    – TomSawyer
    Commented May 29, 2017 at 20:01
  • @TomSawyer I did not understand what you meant. Assume that this class had states, in order to reach these states in this function you need to bind it. Also if you declare a variable like this.elementX in the constructor for example. you have to bind function to reach this element. Commented May 29, 2017 at 20:18
0

Child Component:

    /* Child.js */
    import React from 'react'
    
    class Child extends React.Component {
      componentDidMount() {
        this.props.onRef(this) //-> important 
      }
      componentWillUnmount() {
        this.props.onRef(undefined)
      }
      onChange() {
        alert('ok success')
      }
      render() {
        return <View><Text>Hello World!</Text><View>
      }
    }
    
    export default (Child);

Parent Component:

    /* Parent.js */
    import React from 'react'
    import Child from './Child'
    
    class Parent extends React.Component {
      onShow = () => {
        this.child.onChange()
      }
      render() {
        return (
          <View>
            <Child onRef={ref => (this.child = ref)} />  **important**
            <Button onPress={()=>this.onShow()} title={"button check"}/>
          </View>
        );
      }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.