005.1-setState.html


<!DOCTYPE html>
<html>
<head>
	<style type="text/css">

	</style>
	<script src="http://fb.me/react-0.12.2.js"></script>
	<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>
	<!--https://medium.com/react-tutorials/react-state-14a6d4f736f5
			http://facebook.github.io/react/docs/tutorial.html#reactive-state -->


	<script type="text/jsx">
  /**
  *
  * Assignment:
  *
  * 1. Add a hover event to the div with the on click (http://facebook.github.io/react/docs/events.html)
  * 2. Add a new callback that calls setState
  * 3. Change something on screen (the text, etc.)
  *
  */
      var Recipe = React.createClass({
        getInitialState : function() {
          return {
            dropDownIsOpen : false
          };
        },
        handleClick : function() {
          this.setState({
            dropDownIsOpen : !this.state.dropDownIsOpen
          });
        },
        renderDropdown: function () {
          return (
            <div style={{ background: "#ccc" }}>
              I am a dropdown!
            </div>
          );
        },
        render : function() {
          var dropdown = this.state.dropDownIsOpen ? this.renderDropdown() : null;

          return (
            <div onClick={this.handleClick}>
              Click me!
              {dropdown}
            </div>
          )
        }
      });

      React.render(
        <Recipe />,
        document.body
      );

	</script>
</body>
</html>