Call a method from another Component after the Async function reactjs

Question

I have 2 components, the first component has a function that calls after the async function of the second component, what I want to do is something like vue's this.$emit() function that calls a listener from that component anytime, how can I do that in react?

This is my first component

import React, { Component } from 'react';
import SecondComponent from '../Path/to/second/component'

class MainMenu extends Component {
    callThis (data) {
        console.log(data)
    }

    render () {
        return <SecondComponent onDataReceived = {this.callThis} />
    }
}

export default FirstComponent

And this is my SecondComponent

import React, { Component } from 'react';

class SecondComponent extends Component {
    async asyncFunction () {
        const data = await getDataFromApi()
        // call the function from first component here...
    }

    render () {
        return <button onClick={() => this.asyncFuncion} />
    }
}

export default FirstComponent

Second Component's onClick is not executing asyncFunction;either write onClick={this.asyncFunction} or onClick={()=>this.asyncFunction()} And inside your asyncFunction call this.props.onDataReceived(); — Vaibhav Singh
– Vaibhav Singh, Commented Aug 26, 2019 at 10:49

Federkun · Accepted Answer · 2019-08-26 10:43:26Z

1

Your second component must invoke asyncFuncion, and then inside asyncFuncion you can call the callThis function from the props

class SecondComponent extends Component {
    async asyncFunction () {
        const data = await getDataFromApi()
        this.props.onDataReceived(data)
    }

    render () {
        return <button onClick={() => this.asyncFuncion()} />
    }
}

and do not forget to bind that callThis as well, or just use fat arrow function:

class MainMenu extends Component {
    callThis = (data) => {
        console.log(data)
    }

answered Aug 26, 2019 at 10:43

Federkun

37.1k8 gold badges82 silver badges93 bronze badges

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

Comments

Maldoror · Accepted Answer · 2019-08-26 10:42:26Z

1

On your first component, you are sending a props to your second components. Here is the documentation : https://reactjs.org/docs/components-and-props.html

To access onDataReceived in your second component you could write :

async asyncFunction () {
        const data = await getDataFromApi()
        this.props.onDataReceived(data);
    }

answered Aug 26, 2019 at 10:42

Maldoror

4994 silver badges7 bronze badges

Comments

Meysam · Accepted Answer · 2019-08-26 10:50:30Z

1

this is how you can receive data/use methods from parent passed props:

async asyncFunction () {
    const data = await getDataFromApi()
    // call the function from first component here...
    this.props.onDataReceived(data);
}

edited Aug 26, 2019 at 10:50

Meysam

5802 silver badges7 bronze badges

answered Aug 26, 2019 at 10:40

Max Svidlo

7745 silver badges11 bronze badges

Collectives™ on Stack Overflow

Call a method from another Component after the Async function reactjs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related