1

I have a requirement in which I have to call a function present in a child component from parent component using React.createRef() but the problem here is that it is multilevel child.

I'm able to call a function present in 'ChildComponent1' component but not able to call a function present in 'ChildComponent2' component from 'Parent' component. Please tell me a correct way to do this.

This is my parent.js file

import React, { Component } from 'react';
import ChildComponent1 from './ChildComponent1';

class ParentComponent extends Component {
   constructor(props) {
        super(props);
        this.childRef = React.createRef();
    }
    
    callFunctionFromChild = () => {
        this.ref.current.doSomething()
    }
    
    render() {
        return (
            <div>
                <ChildComponent1 ref={this.childRef} />
                <button onClick={()=>{this.callFunctionFromChild()}}> Click Me <button>
            </div>
        );
    }
}

export default ParentComponent;

This is my ChildComponent1.js file:

import React, { Component } from 'react';
import ChildComponent2 from './ChildComponent2';

class ChildComponent1 extends Component {
    render() {
        return (
            <div>
                <ChildComponent2 ref={this.props.ref} />
            </div>
        );
    }
}

export default ChildComponent1;

and this is my inner ChildComponent2.js file:

import React, { Component } from 'react';

class ChildComponent2 extends Component {
    
    doSomething = () => {
        console.log("Something is done!!");
    }
    
    render() {
        return (
            <div>
                My Child Component
            </div>
        );
    }
}

export default ChildComponent2;
4LPH4
  • 308
  • 1
  • 3
  • 16
  • What are you trying to do exactly? Whatever you're doing right now is not the right way to do it. Why do you need to call something inside `child` from `parent`? – goto Mar 05 '20 at 17:20
  • Does this answer your question? [How to use React.forwardRef in a class based component?](https://stackoverflow.com/questions/51526461/how-to-use-react-forwardref-in-a-class-based-component) – Anurag Srivastava Mar 05 '20 at 17:21
  • @goto1 There is an array in my parent component which I'm passing as props to my child component. I need to update that array present in my child component when I delete an element in parent and I can't use componentWillRecieveProp to update data in child component because my child components will get updated everytime even when I'm adding element to array present in my parent component also. – 4LPH4 Mar 05 '20 at 17:30
  • @AnuragSrivastava That was the first thing that I tried, but it is not working out for me as I have 3 level components. Or maybe I'm not able to understand it. If you can implement this in my code that fulfils my requirement. Then it will be a great help. – 4LPH4 Mar 05 '20 at 17:37
  • @4LPH4 what you're trying to do is not the use case for `refs`. You should use `componentDidUpdate` and compare `prevProps` with (latest) `props`, then update your local/`child` state based on some condition. – goto Mar 05 '20 at 23:36

0 Answers0