Call method of parent class component from child class component

Question

I've got a method addNotification() at App.js which I want to reuse in some of my other components. Here I used AgencyProfile component for example. It doesn't work if I export the addNotification() method from App.js. How can I call the method addNotification() from other child components, here for example AgencyProfile? here is my App.js code

export class App extends React.Component{

.....

        addNotification(title, message, level, time) {
        let dismiss = (time === undefined) ? 0 : time;
        this.notification.addNotification({
            title: title,
            message: message,
            level: level,
            autoDismiss: dismiss
        });
    }
.......

render() {

        return (
            <div>
                <NotificationSystem ref={ref => this.notification = ref}/>
                <AgencyProfile />

            </div>
        );
    }

}

asif.ibtihaj · Accepted Answer · 2019-12-11 04:17:37Z

2

Yeah, this is possible if you pass the function addNotification as a prop (callback) for the component in which you want to reuse the function as:

App.js:

export class App extends React.Component{

.....

addNotification = (title, message, level, time) => {
        let dismiss = (time === undefined) ? 0 : time;
        this.notification.addNotification({
            title: title,
            message: message,
            level: level,
            autoDismiss: dismiss
        });
    };

.......

render() {
        return (
            <div>
                <NotificationSystem ref={ref => this.notification = ref}/>
                <AgencyProfile onAddNotification={this.addNotification} />
                .....

            </div>
        );
    }
}

And in the child component we can just make a method like this to call addNotification() method in the App.js

AgencyProfile.js

showNotification(title, message, level, time){
    this.props.onAddNotification(title, message, level, time);
}

use this method to call addNotification() from anywhere inside AgencyProfile component.

Another approach is to make addNotification() a exportable function in another js file and them import it in the component where you want to use it (But with this approach you'll have to bind this depending on where you are going to use it):

import addNotification from 'helpers/addNotification';

edited Dec 11, 2019 at 4:17

asif.ibtihaj

4191 gold badge6 silver badges15 bronze badges

answered Dec 10, 2019 at 8:26

Alberto Perez

2,9821 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

asif.ibtihaj Over a year ago

thanks @Alberto for your answer, however I've made some changes in your answer to make it more relevant with my problem.

Brian Thompson · Accepted Answer · 2019-09-20 15:02:59Z

0

You can't really export/import a function like that. If you don't want to pass it down the tree as a prop, your best bet will be to use react's context https://reactjs.org/docs/context.html. Then instead of importing a function, you will just get it from context.

answered Sep 20, 2019 at 15:02

Brian Thompson

14.5k4 gold badges27 silver badges50 bronze badges

Collectives™ on Stack Overflow

Call method of parent class component from child class component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related