/Javascript/React/Parent to child react state

Parent to child react state

Update parent state from child react

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'));

Source: stackoverflow.com

Similar codes

0 vote121 views1 answer
Escaping less than great than signs in react
Javascript React
-2 votes99 views2 answers
Showdown react
Javascript React
0 vote156 views1 answer
React controllers
Javascript React
1 vote108 views2 answers
Can't perform a react state update
Javascript React
0 vote116 views1 answer
How to add autoserial number in react js
Javascript React
0 vote115 views3 answers
How to serve React JS static files with express JS?
Javascript React
12 votes216 views1 answer
React chrome extension
Javascript React
20 votes120 views4 answers
On enter key press react
Javascript React
0 vote115 views1 answer
Font family react
Javascript React
0 vote109 views1 answer
To do list app react code
Javascript React