Render in React Based on a Global State Object
We’ll define a simple state object in the entry point of our application. Once the state has been defined, we’ll pass it into our root component as props and replace the static elements in our rendered output with values from the component’s props. We’ll move from static items to an array, seeing how we can use functions like map to render our UI.
[00:00] This application is currently just rendering out static markup, so each of our to-do items is just defined as an LI right in our markup. I'd like this to be more dynamic and have this feed of a state object. Rather than maintaining state within this application, we're going to put that state globally in our index.js file.
[00:19] I'm going to define a constant, I'm going to call it state, and I'm going to set this to equal an object. That object is going to get a todos property. That todos property is going to be an array, and it's going to be an array todo objects.
[00:30] I'll give each one an ID, a name, so we'll mimic what we have currently, and is complete. In this case, this one's going to be true, because we've already done this step. I'll create a couple more. We're going to create the initial state, which we've basically done here, so that is also complete.
[01:03] We'll just give this a new ID. Then our third one will be render based on state. That's not complete yet, so mark that as false. Now that I have this state object, I need to get it into my component. I'm going to pass it in as props.
[01:24] For now, I'm just going to pass in the todos, and I'm going to pass those in as state.todos. We'll save this. Our browser will reload, but nothing's going to change, because we're not actually using this todos prop in our UI.
[01:40] Let's fix that. We'll open up app.js. We're going to come down here and we're going to take this LI. We'll keep one of those and we'll remove the other two. Inside our UL, we're going to map this.props.todos, and we'll use map.
[02:00] Each one of those calls to map will get a todo object. In that to-do, we're just going to render out an LI. In each LI, we're going to provide a key, and that key is just going to be our todo.id. Then our name over here is going to be todo.name. Then our checkbox is going to be checked based on that todo value.
[02:28] Let me drop this down to a new line. I'm going to add a default checked property. That's going to be todo.iscomplete. I'll save this, and when our browser reloads, we should see our todos from our state object with their iscomplete values being respected.
[02:51] Now that we're actually rendering based on that, I can come back in here, and I can update this value to true. Save it, and we're rendering our UI based on a global state object.