Call child component method from parent in react

Question

I have simple component called List which is a simple ul with some li inside. Each li is a simple compone

Answer 1

You need to make use of refs to call a function in the child component from the parent component

render the List component from parent as

<List ref="myList"/>

and then access the handleNewText() function as this.refs.myList.handleNewText()

UPDATE:

Strings refs are no longer recommended by React, you should rather use ref callbacks, check this

<List ref={(ref) => this.myList=ref}/>

and then access the child function like

this.myList.handleNewText()

Answer 2

Adding to @shubham-khatri solution:

If you are referencing a connected child component...

a. That child must say withRef: true in the (4th) config parameter:

@connect(store => ({
    foo: store.whatever
    …
}),null,null,{ withRef: true })

b. Access is through getWrappedInstance() (note, that getWrappedInstance also needs to be called ())

getWrappedInstance().howdyPartner()

Answer 3

I started learning React when functional component came out. Another way I experimented with some success is returning functions that you want to access as closures within a JSON. I like this method because closure is a construct of Javascript and it should still work even if React is updated yet again. Below is an example of child component

function Child(){
    //declare your states and use effects
    const [ppp, setPPP] = useState([]);
    const [qqq, setQQQ] = useState(2);
    //declare function that you want to access
    function funcA(){ /*function to interact with your child components*/}
    function funcB(){ /*function to interact with your child components*/}

    //pure React functional components here
    function Content(){
         //function that you cannot access
         funcC(){ /*.....*/}
         funcD(){/*.......*/}
         //what to render
         return (
           <div> 
               {/* your contents here */} 
           </div>
         )
    }
    //return accessible contents and functions in a JSON
    return {
        content: Content, //function for rendering content
        ExposeA: funcA,   //return as a closure
        ExposeB: funcB,   //return as a closure
    }
}

Below is an example of how you would render the child contents within the parent

function Parent(){
    let chi = Child();
    let ChildContent = chi.Content;
    //calling your exposed functions
    //these function can interacts with the states that affects child components
    chi.ExposeA();  
    chi.ExposeB();
    //render your child component
    return (<div>
        <div> {/* parent stuff here */</div>
        <div> {/* parent stuff here */</div>
        <ChildContent {/*Define your props here */} />
    </div>)
}