Calling a method inside a react component from another react component

Question

I'm fairly new to ReactJS and hitting a problem where I have 2 components, I'll just call them comp1 and comp2. Comp1 renders comp2 and comp2 has a method inside it.

If a button is clicked in comp1 it calls a click handler inside comp1 and I want it to call the method inside comp2 but I keep getting the error this.comp1.myFunc is not a function

Below is the code.

In comp1

class Comp1 extends React.Component
{
    testClick()
    {
        this.comp2Comp.myFunc();
    }

render() {
        const postCommentDisabledState = this.state.newComment.length === 0;

        this.comp2Comp = <Comp2 />

        return (
            <div>
                <button onClick={this.testClick}>Test</button>
                {this.comp2Comp}
            </div>
        )
    }
}

In comp2

class Comp2 extends React.Component
{
    myFunc()
    {
        alert("Testing MyFunc");
    }

    render()
    {
         return (
            <div>comp2</div>
         )
    }
}

Is what I am trying to do possible, if not how would I do what I am trying to achieve?

What the end result is, comp2 has stuff within its state that when a button is pressed in comp1 I can grab the data I need from inside comp2 for comp1 to use.

Ethan Lipkind · Accepted Answer · 2020-06-16 17:48:46Z

2

Since Comp2 is a child component, you should move its state and myFunc to Comp1. Generally in React you want to use one-way data binding, so all state should be "lifted up" to a parent context. See: https://reactjs.org/docs/lifting-state-up.html

Also, just to note, your render function shouldn't have any side effects like setting properties on the component. See: https://reactjs.org/docs/react-component.html#render

answered Jun 16, 2020 at 17:48

Ethan Lipkind

1,1565 silver badges7 bronze badges

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

1 Comment

Boardy Over a year ago

I thought that might be the answer, I'm trying to make it so the comp2 could be re-used and the func would always be available - maybe I need to rethink my components. Thanks for the help

Collectives™ on Stack Overflow

Calling a method inside a react component from another react component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related