Video Course

Getting Started with React: Lesson 6 of 14

Managing State of a Component

Up Next

Parent-Child Component Communication

Autoplaying in 7 seconds!

Cancel

We are going to learn a few new things in this lesson. First, we need to learn about state in React components. Then we are going to learn how to update that state.

State in React is simply any piece of data that is specific to the component it is inside of. This state can be grabbed and used at anytime. This means we can save values and variables on our components that our component can then react to in its render method. To demonstrate this, we will track the value of the input so we can use it later.

When using state, you need to make sure you initialize state with all the properties you plan on there being to manage. This is done in the constructor of our class. Let's initialize this now.

constructor(props) {
  super(props);

  this.state = {
    zipcode: ''
  };
}

The state is simply an attribute added to the class when it is created. Since we are managing the value of the input through this attribute, we need to make sure that when this attribute is updated, then the value of the input also changes. We will do this by setting the value of the input to the value of the zipcode.

<input
  className="form-control"
  type="input"
  name="zipcode"
  value={this.state.zipcode} />

We access the state of the component through this.state. We can then access any attribute in our state from that object. We are able to set the value of an attribute using curly braces. This takes the value of this.state.zipcode and makes it the value of the input. If you view this in your browser, however, you will see nothing happens. The input value never changes when we type in it. This is because we never update it in state! To do so, we will need to call this.setState somewhere in our code. The best place for that is in a callback that will be called whenever the input has something typed into it.

React's JSX has a standard of callbacks called on all component. Some of them even have special ones that are only called for them. One such example is onInput.

<input
  className="form-control"
  type="input"
  name="zipcode"
  value={this.state.zipcode}
  onInput={this.inputUpdated}/>

Here we have a callback called inputUpdated that will be called whenever the input event fires on the input. From our knowledge of basic JavaScript, we know that this is called whenever someone types something into the input. Let's now add this method to our class.

inputUpdated(e) {
  const { value } = e.target;

  this.setState({ zipcode: value });
}

This is a simple method. An event object is automatically passed into this method. We pull the value of the target out of it. We then call this.setState and pass it an object. This object will be merged with the current state of our component. We only need to include the values that we need to update at this time. Notice we are updating the zipcode piece of state by setting it equal to the target value, which is the value of the input.

Unfortunately, this is not all we have to do. JavaScript does not bind the instance value of this to our methods. If we want to use a callback after the render method has run and need to use this in it, we need to manually bind this to the method. We can do this in the constructor. At the bottom of the constructor, add the following line.

this.inputUpdated = this.inputUpdated.bind(this);

Now that we have taken care of that, view our application in the browser. Try typing something into the input. It updates! Also, for fun, open up the React Dev Tools, and find our ZipForm component. On the right-hand side, you can see what the current state of our ZipForm look like. Notice, as you change what is in the input, it updates the zipcode piece of state in our component. Awesome!

Next, we are going to talk about how a parent component talks to a child component and vice versa.

Alex Sears

2 posts

Developing is not only my job but also my passion. I love to teach myself new things as much as I love teaching others. The more people we get involved in this little thing we call "web development," the better we can make it. I mean, we always need more cat videos, right?