State In React

See Code on CodePen

State is at the heart of React, and at it’s core it isn’t too different than developing in any other way. State is just an object that you are storing data in, specifically the data that will effect how the page acts while a user is on it.

To create state (in a Class component, we’ll get into Hooks later) just write the following:

`constructor() {     
    super()
    this.state = {
      name: “Ryan"
    }
  }`

After you declare what kinds of state you need you can sprinkle them throughout your application, where they will be inserted as the kind of value they represent. You can also change it while the user navigates your app. But the best part is that when state changes in React, the page rerenders automatically to show that change!

First, to put state in our JSX just wrap in in curly braces. This is how React knows that something is supposed to be JavaScript, not HTML.

`<h1>Hi, my name is {this.state.name}.</h1>
//Outputs
//Hi, My name is Ryan.`

So what happened here? Since our state was just a string, we referred to that. When the program read that there was state, it went and got that string, and put it into our H1 tag. Now this isn’t too exciting when it’s a static string, but what if you want the user to put their name in? Let’s assume we have a form where the user puts their name, and when they do it changes the state.

`class App extends React.Component {   constructor() {
    super()
    this.state = {
      name: ""
    }
    this.handleChange = this.handleChange.bind(this);
  }`

`====`

`<h1>Hi, my name is {this.state.name}.</h1>
//Outputs
//Hi, My name is “Their name".`

This brings us to the cool part. How we go about changing state.

When the user enters their info into that form something has to happen, a function needs to get called. That function is setState. setState is a core function in React, and if you spend any time in it you will use it a lot!

Here’s what it looks like:

`setState(updater[, callback])`

As you can see it takes two arguments. The first is called the updater, and is just the new state that you want to change it to. This can be something hardcoded if you always want the same result, or something dynamic if you want user input to have an effect.

The second is the callback. As it may imply its just a callback, but importantly its guaranteed to happen after the state is set.

Back in our program we’ll use this in a function that sets the state when the user types in their name.

`handleChange(event){     this.setState({
      name: event.target.value
    })
  }`

And then to put it all together, we can make a form with an input tag. This function will be run every time a change happens to the input tag, like when a user types in their name.

The result looks like this:

`<div className="center">

   <h1>Hi, My name is {this.state.name}</h1>
      <form>
        <label>
          Your Name:
          <input onChange={this.handleChange} />
        </label>
      </form>
</div>`

This is a basic name change in our state, but as you can imagine, it gets ever more complex when you add more pieces of state and change them.

See Code on CodePen