How to update parent state from child component in React + send a paramater

Question

I am following this tutorial but it does not say how to pass to the function a parameter.

In they the child they have

 <Button onClick={this.props.action} />



   handler(id) {
        this.setState({
            messageShown: true,
             id : id
        });
    }

what happens if I want to send a value along with it(say some id or something).

I tried to do

 <Button onClick={() => this.props.action(1)} />

but then my "state" is undefined.

Answer 1

It's hard to say what's going wrong without seeing a full code example, but what you're trying to do is certainly possible. Here's a working example.

 class Parent extends React.Component { constructor(props) { super(props) // Bind the this context to the handler function this.handler = this.handler.bind(this); // Set some state this.state = { messageShown: false }; } // This method will be sent to the child component handler(id) { this.setState({ messageShown: true, id: id }); } // Render the child component and set the action property with the handler as value render() { console.log(this.state); return ( <div> <Child action={this.handler} /> <div>{this.state.id}</div> </div> ); } } class Child extends React.Component { render() { return ( <div> {/* The button will execute the handler function set by the parent component */} <button onClick={() => this.props.action(1)} > button </button> </div> ) } } ReactDOM.render(<Parent />, document.getElementById('main')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="main"></div> 

Answer 2

To achieve what you want, in your Child component you should call a function that calls passed function. In this case you'll be able to pass any parameter you want.

Let's code!

Your Parent component will be:

class Parent extends React.Component {
    constructor(props) {
        super(props)

        // Bind the this context to the handler function
        this.handler = this.handler.bind(this);

        // Set some state
        this.state = {
            messageShown: false,
            id: -1 // initialize new state property with a value
        };
    }

    // This method will be sent to the child component
    handler(id) {
        this.setState({
            messageShown: true,
            id: id
        });
    }

    // Render the child component and set the action property with the handler as value
    render() {
        return <Child action={this.handler} />
    }
}

And your Child component will be

class Child extends React.Component {
    render() {
        return (
            <div>
                {/* The button will execute the handler function set by the parent component, passing any parameter */}
                <Button onClick={() => this.props.action(1)} />
            </div>
        )
    }
}

Hope this helps

Answer 3

Usually when this.state is undefined after invoking a callback function it is a binding issue. Double check that the handler function has this bound to it in the parent component's constructor.

this.handler = this.handler.bind(this);

More on binding: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind