React Native (feat. Redux) React Native (feat. Redux)

Creating a Todo App Solution Part 2

Check out a free preview of the full React Native (feat. Redux) course:
The "Creating a Todo App Solution Part 2" Lesson is part of the full, React Native (feat. Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Scott demonstrates a couple alternative ways the Todo application could have been created. Instead of handling the state for the new todo, Scott references the input field directly. He also adds the ability to remove a todo item.

Get Unlimited Access Now

Transcript from the "Creating a Todo App Solution Part 2" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Scott: So the other way we could have done this is not keep track of the newTodo state. And we could have just got the reference from the input. So if you were,
>> Scott: Here and so what you can do is you can actually just use the ref property or the ref attribute or no ref property, yeah, ref property.

[00:00:27] And we can say ref and this is gonna be a function that takes in like the given node and what we want to do is just say this.input = node. So now we have this.input = node. And then on click, instead of getting this state right here, instead of keeping track of the state, what we can do is we can just say this.input cuz we set it right here, this.input

[00:00:59]
>> Scott: .value. So we'll go ahead and get the value from, this is a native DOM right here. So when this renders, it's gonna set up a reference to the native counterpart of this input and give us access to it in our JavaScript. So that's how we can get a .value property of it cuz it's gonna be native.

[00:01:19] And then we just need to make sure we take off, there's a value thing, otherwise it will freakout and we also don't need the onChange.
>> Scott: So now we just have a reference, that we're always just going to update it and then what we would do now is we still update the todos.

[00:01:42] And we'll just say this.input.value equals an empty string.
>> Scott: So let's check this out.
>> Scott: And it works the same way.
>> Scott: There's another way you can set it up using the two way data binding on a form but I almost never use it. I only probably ever use these two approaches.

[00:02:08] Any question on this stuff? Yes?
>> Speaker 2: You don't have to walk me through it, but how will you set it up to be able to click on that todo item, and delete it from the array?
>> Scott: Yeah, so if you want to click on this todo item and delete it from the array, I mean we can do a right-click.

[00:02:24] You just say handleClick, oops, I'm sorry, onClick and we'll just say this.removeToDo.bind(this).
>> Scott: And actually what we need to do is we need to get a reference to this, todo. All right, we gonna put this on another line cuz it's gonna get crazy. Let's just, it's already getting crazy.

[00:02:58]
>> Scott: So we'll grab this here, and we'll put this here. And we need to,
>> Scott: Return some stuff, here we go.
>> Scott: Yeah, so the way you would do that. Get rid of that. Would be wait, why is this freaking out? Bracket, bracket, bracket.
>> Scott: I know, hold on, we'll just do an implicit return here.

[00:03:32]
>> Scott: There we go.
>> Scott: There we go.
>> Scott: Why is it still freaking out? The syntax. We'll get to that. So we'll just say this.removeTodo.bind(this), but we need a reference to the actual todo.
>> Speaker 2: You need another parenthesis at the bottom. The map.
>> Scott: Where? The map.
>> Speaker 2: Line 36.

[00:03:54]
>> Scott: 36, okay, here we go. Thanks, great, okay, cool. So now what we would do is we need a reference to the actual todo. So we'll just do an anonymous functionary here onClick and we'll say this.call pass in this and then the actual todo. There or actually what we need is the index of that todo to remove it.

[00:04:22] So we'll say index
>> Scott: And then i.
>> Speaker 3: Call, two l's.
>> Scott: Thank you. So they will pass in the index here. And then now what we'll do is we'll make a new method called removeTodo.
>> Scott: removeTodo, that grabs the index, and then we'll just say const todos = this.state.todos.

[00:04:48] And then we just want to splice that out or .slice(0) up to index. Index, so whatever that is. And then we'd also wanna get this.state.todos.slice, (i + 1). So everything before the index, and after the index.
>> Speaker 4: 1 there, that should be i. 1 should be i.
>> Scott: Thank you.

[00:05:34]
>> Scott: And then we'll say this.setState
>> Scott: ((todos)), so let's check that out and see what happens.
>> Speaker 5: Why are you calling call instead of just calling function?
>> Scott: Cuz it has to bind it.
>> Speaker 5: To bind it [CROSSTALK].
>> Scott: Yeah, there's a auto abiding thing going on with React and I don't have stage zero for Babel enabled to do the property initializers and stuff like that.

[00:06:03] So if you make a new todo and we click on it, it gets rid of it. Yeah, but this thing's still hanging around in the DOM, cuz we don't have the key property and stuff. Cool, any other questions? Yes?
>> Speaker 6: Couple questions from the audience. Xavier L. Why always explicate repeating the bind this part.

[00:06:29]
>> Scott: That's because when you use the ES6 class syntax with the react components, react takes care of auto-binding the methods to the correct context. By using the class syntax it breaks that so you actually have to call bind when we wanna use it. But if you don't want to call bind every single time you use it, the way to get around it without installing a new plugin for Babel is inside your constructor.

[00:06:56] What you would do is you would say, for instance, if we wanted to go ahead and set a binding for handleChange, we can say this.handleChange = this.handleChange.bind(this).
>> Scott: And then now when we use handleChange in the template, we don't have to call bind every single time, because we did in our constructor.

[00:07:19] But if you set up stage zero, Babel, what you can do is instead is a little hack I guess. You can just use arrow functions. So you can handleChange equals an arrow function here, which will keep the syntax of the class, so this will work, too. And then you don't even have to do this anymore.

[00:07:34] And you don't have to call .bind down here either. You could just use the arrow function right on the class itself.
>> Speaker 6: Next question from Charles M. It's a long one, maybe you wanna read that.
>> Scott: Do you tend to use refs more often for form data or would you pin each input into a piece of state?

[00:07:52] I've also seen some people reference a target children zero but maybe because you don't have to remember the index for this and that input. Me typically, I almost never use refs. I just for forms, I just put in the state. That's like literally only time I ever have a local state.

[00:08:08] Most of the time I store everything in my state management whether it's Redux or whatever, RXJS. And forms like the S case, where I'm like, okay, Micropoint is going to have local state and I'll keep track of it there. That way I can do things with the state and not have to refer to the ref every single time I want to do something, I just want to keep track of the state and not the actual element.

[00:08:30]
>> Scott: Okay, another question, on some web projects I get to bind almost every method in the class, is that right? Yes, if you want to use the method in your template and the render function, yes, you'll have to bind. But again, the ways you could do it is, you can do this, so you don't have to bind every time.

[00:08:48] Or you can literally just download Babel preset stage zero and add it to your Babel RC, add stage zero in here to your preset and then you don't have to do that, you can just use arrow functions.
>> Scott: Cool, any other questions on that? I pushed up the solution for this too, if you want it?

[00:09:09] It's on the, what branch is it on? All right, it's on todo-solution branch of that same starter repose. So you can pull that down, if you want because now we're going to take that and actually convert that to React Native. So if you haven't finished it or if you just wait and it's there, you can pull it down.

[00:09:28]
>> Scott: Great. So now let's get back to our slides here. Any other question before we get back to the slides?
>> Scott: No, all right. So everybody knows Reacts like pro, pro-React, right? That was all to it pretty much. I mean it is actually pretty simple. Believe it or not like that's most of it.

[00:09:52] There is some other stuff like lifecycle hooks and other things you can do in JSX, but it's really just JavaScript with some methods. That's really cool. It's pretty simple.