react_learn
/
shafish_react_this_state.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="react-demos/build/react.development.js"></script>
        <script src="react-demos/build/react-dom.development.js"></script>
        <script src="react-demos/build/babel.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
        class LikeButton extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    liked: false
                }
                this.handleClick = this.handleClick.bind(this)
            }
            handleClick(event) {
                this.setState({ liked: !this.state.liked });
            }
            render() {
                var text = this.state.liked ? 'like' : 'haven\'t liked';
                return (
                    <p onClick={this.handleClick}>
                    You {text} this. Click to toggle.
                    </p>
                );
            }
        }
        ReactDOM.render(
            <LikeButton />,
            document.getElementById('example')
        );
        </script>
      </body>
</html>