React Course Notes : Component State

20180921

A component shouldn’t update its own prop but it is allowed to update its own state.

  • I am going to use a method that’s built in to react called getInitialState.

getInitialState: function(){

},

It’s going to pass an anonymous function to it and that anonymous function doesn’t need to take any arguments. getInitialState is very similar to getDefaultProps. And by similar I mean it returns an object and that object gets set to this.State.

return{

name: this.props.name

};

What I’m going to do in here is return an object. And the only state I am going to maintain for now is going to be name and I’m going to set it equal to this.props.name.

So what we’re telling our component to do is this :

Hey you know that you’re going to get a name proper no matter what. It’s either going to get passed in or it’s going to be defaulted to react. Now that’s fine.

The props cool but what I want you to do as a component is to maintain a name state that you can change yourself. And this is the important distinction. A component can’t update “props” so I want to use “state” for the name. Since I am going to be letting the user update it.

  • Instead of having a name equal this.props.name, I want to have an equal this.state.name

var name = this.state.name;

And at this point I can save project refresh the browser and the basic functionality is still there. Hello Andrew prints to the screen. Although typing in the name and hitting the button still doesn’t do anything. I just wanted to make sure I didn’t break the program and I didn’t get initial state returns.

  • Setting a state is a little more complex it requires us to call a function

We can’t just update the value of the start state a name like this. That might seem like it’s going to work but it’s not going to work.

this.state.name=name;

  • In order for react to re render the component we need to call it “setState”
  • The reason I want to call setState is so one I can set a new value for name and two I can re-render our component. If my component depends on the name state which it does so to do that I am going to call this.setState and setState takes an object.

this.setState({

)}

Kind of like the one we returned here.

So for now I am only going to update a “name” because it’s the only one we have and I am going to set it equal to the name variable which I have right here.

this.setState({

name:name

)}

  • I’m going to go ahead and remove my alert and save the file

So let’s break down the flow

  • The props get defined it either default to the one or to react
  • getInitialState sets its name state to the proper value
  • Down in render function. We use this.state.name to fetch the value and we display it to the screen right down the<h1>Hello {name}!</h1>
  • When a user submitted the form I call this.setState which is going to update the state and re-render the parts of the component that matter
  • Let’s go ahead and refresh the browser

I’m going to type Jen in the box hit enter and you can see right here. Jan print to the screen. Now I have a component that knows how to update its own state using set state. So if a user interacts with it we can update the data in it. I could change Jen to Mike hit enter and hello Mike prints to the screen.

I also notice that the value inside of the text box didn’t get removed. The component isn’t completely rounded re-act is very smart at figuring out which parts of my components are going to change.

And in this case it found out that the input field itself doesn’t depend on the this.state.name, so it only updated H1 tag.

  • Now it would be nice to be able to clear the value from here and we can do that

Inside of the onButtonClick callback, I am going to switch things up a little bit. I’m going to set a name equal to this.refs.name. Then just below I’m going to call this.refs .name.value equals an empty string just like this.

this.refs.name.valu = '';

And with this in place I should be able to refresh my browser to type a name in it set name and you can see Hello Mike prints to the screen and input box gets emptied.

State can be updated by my components. So if I am confused something should be a prop or a state just ask myself that question : “Is my component going to be updating the value?”

I shouldn’t allow the state to be an empty string which is what it currently is over in Atom. If I type nothing in the box and hit enter or click the set name button you can see my component is rendering itself with bad data. I am going to make a few changes to my onButtonClick method.

  • The first thing I want to do is pull out my reference into its own variable because the code is starting to get a bit repetitive

var nameRef = this.refs.name;

  • Then I am going to fetch the name itself

var name= nameRef.value;

  • Up next is replacing it with a nameRef value

nameRef.value='';

I want to do is check if the name variable is a string and its length is greater than zero. So to do that I’m going to type:

if(typeof name === 'string' && name.length>0){

this.setState({

name:name

});

}

},

If it’s not the case for the moment I am not going to have an else clause. So nothing is going to happen will simply give the user an opportunity to try again.

  • I’m going to go ahead and save my file and refresh the browser

I have Hello Andrew and then I’ll type Mike. I get Hello Mike and then I’ll hit enter or click set name with nothing in the input field. You can see the program stays the way it was.

Now I have some good data checking and also have set state call which updates the state.