How to access method of the child component from parent in reactjs

Question

I'm trying to call child component from parent component in reactjs using refs.but it throws error saying showModal() is not a function when I tried to call.

//app.js

 class app extends Component {
      constructor(props) {
         super(props);

         this.POPUP = React.createRef();
      }
      showModal(){
            this.POPUP.showModal(true);
      }
      render() {
         return (
             <React.Fragment>
                <span><a onClick={() => this.showModal()}>Show</a></span>

                <POPUP onRef={ref => (this.POPUP = ref)}></POPUP>
             </React.Fragment >
       )
     }
 }

popup.js

 class POPUP extends Component {
   showModal(show) {
         console.log('showmodal');

     }
   render() {
          console.log(this.props.showModalPopup);
       <React.Fragment>
             <Modal

                 position="center">
                 <div>
                     //code
                 </div>
             </Modal>
       </React.Fragment>
       )
     }
 }

Is there any alternative in nextjs.please help

Where you've used `showpopup()` function ? It's not showing in the code — Meet Zaveri, Sep 16 '19 at 10:59
In react, there is one way data binding, We can pass props (as methods and data) from parent to child. But not from child to parent. You can call parent's method(as a `this.props.callParentMethod(childData))` to pass child's data — Meet Zaveri, Sep 16 '19 at 11:07
Possible duplicate of [Call child method from parent](https://stackoverflow.com/questions/37949981/call-child-method-from-parent) — Sultan Aslam, Sep 16 '19 at 11:07
@MeetZaveri - can you please provide some code to understand — Karthi, Sep 16 '19 at 11:12
@Karthi Yurui's answer makes it a good example as to store main data in parent — Meet Zaveri, Sep 16 '19 at 11:40

score 3 · Accepted Answer · answered Sep 16 '19 at 11:30

https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

First of all if you want to access that POPUP instance you should do

this.POPUP.current.showModal(true);

BTW Your showModal function needs to be bound to the child component if you intend to alter its state.

However, even this is doable - this is usually not the recommended way of doing React.

If you want the parent to decide if showModalPopup should be true, you probably should keep the state inside of your parent component:

 class App extends Component {
      constructor(props) {
         super(props);

         this.state = { showModalPopup: false };

         this.showModal = this.showModal.bind(this);
      }
      showModal(){
            this.setState({ showModalPopup: true });
      }
      render() {
         return (
             <React.Fragment>
                <span><a onClick={this.showModal}>Show</a></span>

                <POPUP show={this.state.showModalPopup}></POPUP>
             </React.Fragment >
       )
     }
 }

const POPUP = ({ show }) => (
    <Modal show={show} position="center">
      // your content.
    </Modal>
)

How to access method of the child component from parent in reactjs

1 Answers1

Linked