Introducing state

- [Instructor] One of the most important concepts in React is state. Components can have a local state but in order to use this, we need to use in the ES6 class component. So to demonstrate this, let's update the library component to be an ES6 class instead of a function component. So this is always fairly easy to refactor. We're going to replace line 21 here, we'll say class Library extends React component and then we're going to add the critical render method, we have to have that.

And then we'll take everything that has been returned here and simply place it in the render. And I see that we have an extra curly brace there so let's delete that and it says that Books is not defined. That's okay, the thing we need to do here is instead of passing down props to our function, we're going to access them via this. So we'll say const books equals this.props.books.

That will work well but a shorter syntax that you can use here is to use ES6 destructuring. So I'm going to replace books with books destructure and then we're going to destructure this from the props object so from this.props versus this.props.books. So this will work in the same way and it'll allow us to use books without having to add this.props right here. So one way to add local state to this component is to use the constructor method.

I'm going to add this here on line 22. Now the constructor's going to take in props. We're going to use this super method here which is going to create a new instance of this class. Then we can add a state value so I'm going to say this.state. Now state is just going to be an object with several different keys on it, similar to props. But this is going to have information about whether our library is open so I'll say open is true. And then we can display the value of this.state.open within our component by referencing this.state.

So let me show you this first, right before we destructure books in our properties. I'm going to console log this.state. So again, state is just an object and it has as many keys as you set up and then you can use these values within the context of your component. And you can also change them which we'll get to a little bit later. So inside of our div, right above the mapping over the books, let's add an h1 and we'll say the library is this.state.open so we'll test to see if this.state.open is true.

If it is, we'll return open, if not, we'll return closed. So this is a little bit of conditional rendering here that we can use with this inline or ternary if statement. Alright, so this is being displayed as we expect. If I ever update that value, our UI will reflect whatever the state is. Excellent, so in the next video, we're going to learn how to change the state using set state.