[React] React Fundamentals: State Basics

State is used for properties on a component that will change, versus static properties that are passed in. This lesson will introduce you to taking input within your React components.

Properties vs. State

When you think of properties, you should be thinking of component initialisation. When you think of state, you should think of an internal data-set which affects the rendering of components.

Setting Initial State:

This is done by defining a method called getInitialState() and returning an object.

Setting State:

Setting state should only be done from inside the component. As mentioned, state should be treated as private data, but there are times when you may need to update it. setState()

Replacing State:

It’s also possible to replace values in the state by using the replaceState()method.

/**
 * @jsx React.DOM
 */
  
var InterfaceComponent = React.createClass({
  getInitialState : function() {
    return {
      first : "chris",
      last  : "pitt"
    };
  },
  handleClick : function() {
    this.replaceState({
      first : "bob"
    });
  },
  render : function() {
    return <div onClick={this.handleClick}>
      hello { this.state.first + " " + this.state.last }
    </div>;
  }
});

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>React Lesson 3: state</title>
</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js"></script>
<script type="text/jsx">

    var React_app = React.createClass({
        getInitialState: function() {
            return {
                name: "Joe"
            }
        },
        myUpdate: function(e){
            this.replaceState({name: e.target.value});
        },
        render: function() {
            return (
                 <div>
                    Your name: <input type="text" onChange={this.myUpdate}/>
                    <h1>{this.state.name}</h1>
                 </div>
            );
        }
    });

    React.render(<React_app />, document.body);
</script>
</body>
</html>