React call parent component method from child component method

Question

I have a child component which is a Redux form and from it's handleSubmit method, I need to call a method on the Parent Component. I try to do this by passing a callback as props from the Parent and nothing happens.

I've seen that this method works only when a function is called directly with an event handler on the child component.

import Parent from './parent.js';
class Child extends React.Component {
    constructor(props) {
        super(props);
        };

    callCloseModal = () => {
        this.props.closeModal();
    }

    handleFormSubmit (values) {
        this.callCloseModal()    
    }

    render() {
         <form onSubmit= 
            {handleSubmit(this.handleFormSubmit.bind(this))}>
            .....
         </form>
    }
}

class Parent extends React.Component {
      constructor (props) {
        super(props)
        this.state = {
          modalOpen: false,
        }
      }
     .....

    handleModalClose() {
        this.setState({ modalOpen: false })
    }

    render() {
          <Child closeModal={this.handleModalClose}> {this.props.children}</Child>
    }
}

How can I call a method on the parent component from a method on a child component?

Edit: The method was correct but it was one level higher (Grandparent component)

score 1 · Answer 1 · answered Mar 29 '18 at 13:39

In your onSubmit handler:

render() {
     <form onSubmit= 
        {handleSubmit(this.handleFormSubmit.bind(this))}>
        .....
     </form>
}

You call handleFormSubmit, but in its definition:

handleFormSubmit (values) {
    this.callCloseModal    
}

You only reference the callCloseModal. Notice callCloseModal is defined as an arrow function:

callCloseModal = () => {
    this.props.closeModal();
}

So you need to call it. Try:

handleFormSubmit (values) {
    this.callCloseModal();
}

score 0 · Answer 2 · answered Mar 29 '18 at 13:41

I guess this would work as expected. Just call callCloseModal as a function inside handleFormSubmit

class Child extends React.Component {
    constructor(props) {
        super(props);
    };

    callCloseModal = () => {
        // ideally you want to check if props is a func
        if (typeof this.props.closeModal === 'function') {
            this.props.closeModal();
        }
    }

    handleFormSubmit = (values) => { // no need to mix binding with arrow funcs
        this.callCloseModal() // should be calling as a function
    }

    render() {
         <form onSubmit= 
            {handleSubmit(this.handleFormSubmit)}>
            .....
         </form>
    }
}

score 0 · Answer 3 · answered Mar 29 '18 at 13:50

0

you just have to change the function from this

callCloseModal = () => {
    this.props.closeModal();
}

to this

callCloseModal = () => {
    this.props.handleModalClose();
}

Let me know if you face any other issue.

answered Mar 29 '18 at 13:50

Aniruddh Agarwal

900
1
7
22

React call parent component method from child component method

3 Answers3