This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Creating a Todo App Solution Part 1" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Scott Moss: Let's just go over quickly a simple Todo implementation here in React for the web. There's a few ways you can do this, and I'll probably walk through one or two different ways we can do it. So a basic Todo app, the first thing we want to do is, we know that we need to keep track of the Todos that we've written here on the page.
[00:00:20] So inside of our constructor function, after we call super, because we're extending component here, I'm just gonna set up a place where we can actually store those todos. I'm just gonna call them todos. And it's gonna be an array. And then I'm gonna come down here to our return, and I'm gonna set up some basic templating for our todo app here.
[00:00:38] So let's just have a div and then we use a form here. So we can use the enter button for free and then what we'll do is we need to have a input. So let's make a input and let's put a placeholder. So there's new todo and it will also need a button that will say create.
[00:01:03] And then underneath that form, that's where we're just list all of our todos. So I'll just make a ul here and then inside that ul I'm going to iterate over the todos inside of our state. So using the brackets for that interpolation JavaScript, I'll say this.state.todos.map which is gonna give us access that individual todo.
[00:01:31] And then I'm just going to go ahead and return an li here for each todo with a todo in there. So that's literally just iterating over the todos array and then for each one return this element. That's what's happening here, I'm just doing it all on one line.
[00:01:49] It's fancy. So we got that part. So the next thing we need to do is somehow is capture the value of the input which is gonna be where we type in our new todo. And then on click, add that new todo to our todos collection. So there's two ways we can do it.
[00:02:05] The first we can do it is you can keep track of that state of the input. And that's what I will do first. So I'll just come in here, and say, new todo on state. And I'm gonna set it to empty string by default. Then I'm gonna come down to our input, and I'm going to bind to this value prop here.
[00:02:23] And the value is going to be this.state.newTodo. So that's gonna be a value for our input, which is just going to be an empty string. But now when that value changes, also once, I'm sorry when the input value changes, also wanna update this.state.newTodos value. So what I can do is also I can use the onChange property here and I can pass in a method.
[00:02:52] So let's just make of that it we'll call this handleChange and it's gonna receive the event so I'll just put e here. And because this event right here is actually gonna be the change event that happened on this input. So we can actually get the value by saying, const we'll say value =,
[00:03:21]
>> Scott Moss: From the e.target. So I'm just gonna get the value here. This is just a shortcut. This is de-structuring. This is equivalent of just doing that, it's the same thing. I just didn't wanna write value twice. So I did destructuring on the property or an object. So we get the value there and then we need to update the new todo with that value.
[00:03:49] So then we'll say this.setState, which is a function and the state that we want to set. So the state you wanna set the new todo. And we wanna set that equal to the value that we just got. So now when we type, and then we need to come down to the onChange, and actually type in that method.
[00:04:07] So this.handleChange.bindthis. So now as we type the value updates, let's just check that out right quick. I guess I need to serve it.
>> [INAUDIBLE]
>> Scott Moss: Yeah, sorry about that, that is kind of small, yeah. [LAUGH] Is that better? Is that better, yeah? Cool, I'll bump this, too, there we go.
[00:04:35] So now when we type, the input updates as normally. But just to show you why we actually needed that. If I got rid of the onChange, and left the value, the input's not gonna update. Let's check it out. See, I'm actually typing right now, but the input's not updating because the values is bound to whatever the state is which is never changing it's always an empty stream.
[00:05:02] So, it doesn't matter what you type in, the value is always going to be set to whatever the state is. So that's why we had to put that onChange there. So now onChange, we're just updating the state so that unidirectional data flow. So the input changes the state and the state comes back around, and then changes the value.
[00:05:22] So we have that. And then on the button click, what we wanna do, is we wanna take that value, and we wanna add it to our todos array. So we can do on here, is we can say onClick.
>> Scott Moss: And then onClick, let's just say this.handleClick. And let's come in here, make another method called handleClick.
[00:05:50] Now this also is gonna receive the click event and because we're using a form, we wanna prevent the default, otherwise it's going to try to send it to the server.
>> Scott Moss: There we go. And then all we wanna do in here is just update the Todo state with the newTodo state.
[00:06:10] So we can just say const todos =. We can make a new array here inline. And we can spread over the already todo state. And then we just go ahead and add in the new todo state, which is this.state.newTodo. And then now all we gotta do is call set state.
[00:06:34] This.setState and the state that we wanna set this todos. And I only have to write it once, again, because it's the same name. The to do value is the same name as the to do property, it's equivalent of doing this. So I can just do it once, sweet.
[00:06:55] Don't you also wanna set new todo? Yeah, and then I also want to overwrite, I need to do to be a new string so it empties out the value, the input so it's not stayed in there. Nice, so let's check this out. So if we say, clean up.
[00:07:14] We get the clean up the value emptied out. Lift, code, there we go. So that's one way to do it. Another way we could have done, actually, any questions on that so far? No?
>> Speaker 2: I wasn't sure if I caught how I cleaned out the the value.
>> Scott Moss: Yeah.
[00:07:34]
>> Speaker 2: Aside from setting the state was there something else?
>> Scott Moss: Nope, that's it. We just set the state, and that's because the input is always gonna be bound to that state. So whatever that state is, that's the value of the input. It's not whatever the person types in, it's whatever this state is.
[00:07:47]
>> Speaker 2: That's the part I didn't figure out on mine.
>> Scott Moss: Yeah.