score:1

Accepted answer

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)
    }

score: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);
}

score: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);
    }

Related Query

More Query from same tag