I am trying to call function of parent class from child to close modal. However, I always get undefined is not an object this.ref.modal

This is what I have:

1st 

Import Two from ‘./Two’;


export default class One extends Component {
    static closeModal(){
            this.refs.modal.close();
    }
    <Modal>
    </Two>
    </Modal>
}

2nd

Import One from ‘./One’;

export default class Two extends Component {
    randomFunction(){
       One.CloseModal();
}
}

First ponent is a modalbox and second ponent is Camera. I would like to close first modal from Camera ponent. Am I doing something wrong?

I am trying to call function of parent class from child to close modal. However, I always get undefined is not an object this.ref.modal

This is what I have:

1st 

Import Two from ‘./Two’;


export default class One extends Component {
    static closeModal(){
            this.refs.modal.close();
    }
    <Modal>
    </Two>
    </Modal>
}

2nd

Import One from ‘./One’;

export default class Two extends Component {
    randomFunction(){
       One.CloseModal();
}
}

First ponent is a modalbox and second ponent is Camera. I would like to close first modal from Camera ponent. Am I doing something wrong?

• javascript
• react-native
• modal-dialog

Share Follow asked Jan 16, 2018 at 3:16 Krilo MaxKrilo Max 27511 gold badge33 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

What you are trying to do is have a parent ponent, One, pass a function to the child, Two, and have the child ponent call the function. The general way you should approach passing information, whether it be data or functions, from a parent to the child is through props. This could be achieved through the following approach:

One.js

import Two from ‘./Two’;

export default class One extends Component {
    closeModal(){
        this.refs.modal.close();
    }
    render() {
        return (
            <Modal>
                <Two closeModal={this.closeModal} />
            </Modal
        )
    }
}

Two.js

export default class Two extends Component {
    randomFunction() {
        this.props.closeModal()
    }
}

The key part is in One.js when I instantiate the Two ponent and pass in the closeModal function as a prop. Then, in Two.js you can access all props passed into the class within the "this.props" object.

Notice how I didn't have to import One.js in Two.js. This is because in React you should think of each ponent as its own entity that doesn't know anything about the parent class that is using it. Two.js just knows that it's parent will be using it and passing in a "closeModal" function as a prop which it can use.

You can read more about props and look at examples here. To read more about thinking hierarchically with react, you can look at this guide

Good luck!

Before using this.ref.modal you must set your ref like ref='modal'. And you also need to bind your function closeModal before passing it as a prop.

One.js

import Two from './Two'

export default class One extends Component {
    closeModal(){
        this.refs.modal.close();
    }

    render() {
        return (
            <Modal ref='modal'>
                <Two closeModal={() => this.closeModal()} />
            </Modal
        )
    }
}

Two.js

export default class Two extends Component {
    randomFunction() {
        this.props.closeModal()
    }
}

For more information refer to https://reactjs/docs/refs-and-the-dom.html and https://facebook.github.io/react-native/docs/direct-manipulation.html