State allows you to control how your application works. You initialize state using the getInitialState method. You use expressions to work with state within your components. However, they have to be pretty simple. The way around that limitation is to use an external variable. One special case is how you can use a special object to work with inline styles.
- [Voiceover] State is a very important concept when you're working with React.js. It keeps track of what's happening in the components at any point in time. You initialize State using the getInistialState method, and that goes inside your main component variable. GetInitialState needs to return an object with the initial state of the component when the application is first run. Once you do that you'll have access to the state of the application inside the render function as well.
To use it inside the render function you need to use curly braces to create expressions. These expressions are going to be translated into Java Script command by our goal process, and because of how it's done, they have to be pretty simple. You can get away with using Java Script Ternary commands, or external functions for more complicated processing. I'll show you how to do that. You can even use these to control Inline styles, which is how you create certain types of interaction within React.
Let's start by adding the getInitialState method inside the Create Object class. Now you're going to do this just like you did with the render method. Let's go ahead an add our return statement. Here we'll add a property called title, and we'll set it to appointments. In order to render the state in our application, you can use an expression, and in React you do that with curly braces.
Let's go ahead and modify this headline level one right here, and we'll use an expression instead, using the state that's now available to you. I can call it using this, meaning the current object, and then type in state, and then the name of the property, which is title. You can see that in my application the title updated to just Appointments. Now if anything happens to state during the normal operation of our application, then the application will "react" to the changes, causing a re-render.
This is why this library is called React, and what's happening in the render method will be executed again. Because of the way expressions are converted to regular Java Script, they have to be pretty simple. If you want to use more complex expressions, you need to use either a Ternary operator, or an external function. Let's go ahead and add another variable to our state. We'll call this show and we'll set it to true. Now let's use an expression to show or hide a word, depending on the value of this bullion.
The question mark is what we call in Java Script a Ternary operator. It's equivalent to an if statement, but it can be expressed in a single line. This essentially means if this state show is true, then I'll put the word Pet to the screen, otherwise do nothing. If things need to get more complicated, you can use an external statement to control how things are displayed. Because we want React to do this whenever a state change happens, we'll do it inside our render method.
I'm going to create a variable here called showTitle, and then add an if statement. If the state of the variable show is true, then I want to set this showTitle variable to be the word New. Now I can replace this Ternary statement here, with this variable called showTitle, and when I save you can see that the word now becomes New Appointments.
We can check and modify the state of the application if you've installed the React developer tools, Chrome Extension. I'm going to go to inspect element in Google Chrome, and I'm going to switch over to the React tab. Once you do that you can see your state right here in this section, if we change this show state to false, you can see that the word New doesn't show. We can also change the state of title, and that will cause a re-render of the application.
One interesting use for this technique happens when you need to create inline styles that control how an element is displayed. In that case you create an object with the css properties you want to change. I'm going to add a variable here called displayList, and that variable is going to be set to an object. This object is going to be a series of css properties and values. So I can set, for example, the display property to a Ternary statement that is going to determine what's going to happen with this style.
I'm going to say this.state.show, and so if the value of the show variable is true I'm going to set that to a block style. Otherwise I'll set it to a none style, and I can add additional css properties, so, for example, I can do the color is going to be red. If you want to use a property that has a hyphen in css, then what's after the hyphen should be capitalized. For example, background-color, the word color would be capitalized. Let's go ahead and add that into our un-ordered list, and so we'll set the style property here to be equal to and I'll use the expression curly braces.
I'm going to say display list. Let's go ahead and save that, and by default the list will now be red. That's because the show variable, or the show property of the state is currently true. Now, let's go ahead and break into the React tools, so if you have the Chrome Developer extension for React you can right click anywhere and select inspect element. I do want to show you that when you inspect an element, you want to make sure that you are at the top most element, because otherwise when you switch to this React thing right here it's not going to show you the state variables.
It's going to show you just the variables for that specific item, so you do want to move up to main interface. Now we can set true to false here, and if we do that two things will happen. The display will be set to none, which means it hides the list, and because we're also using that variable to show the title, the word new will be gone. State allows you to control how your application works. You can initialize State using getInitialState, and you're going to use expressions to work with State within your components.
They have to be pretty simple, the way around that limitation is to use an external variable. One super special case that you use a lot in React is creating a special object to work with Inline styles.
- Using components and subcomponents
- Working with state
- Handling events
- Creating subcomponents
- Using references
- Sorting and updating views, events, and search results