This course has been updated! We now recommend you take the React Native, v2 course.
Transcript from the "Convert the Todo App to React Native Solution Part 2" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> Scott: So the first thing we wanna do is assess some state, so a constructor.
>> Scott: Remember, we need to call super here, otherwise, it'll freak out. And I will say this.state = todos: and newTodo:, there we go. So we got to stay here, and what we'll do now is we'll just give you that text will make a view.
[00:00:34] And inside that view, we will have a TextInput. And I will set up a few things here. I want todos on multiple lines. The first is gonna be the value, and that's gonna be this.state.newTodo. And then, onChange text which is gonna pass in the text when it changes, let me say this.handleChange.bind(this).
[00:01:06] So we got that and then we need to go ahead and set up a button, so we'll say touchableOpacity. And we'll pass in some text here and we'll say, create, and for the event here is just onPress. I will say this.handlePress.bind(this). So we got that set up, and then the next thing we do is set up the elements to render on the page.
[00:01:41] So then we'll make a new View here and we'll just, well to be cheap and do some text for the elements. So we'll say this.state.todos.map over them get the todo. Let's look at the index too.
>> Scott: And what we'll do is we'll just return a Text with the key ={i} so it doesn't freak out.
[00:02:11] And then we'll just put the todo in there like that.
>> Scott: So, we break this on another line.
>> Scott: There we go. So, that's what I'm doing.
>> Scott: Cool, so we got that. No, is not, so this is the error you were getting?
>> Speaker 2: Yeah.
>> Scott: So this.state.newTodo JS 21 are in this state need to do.
[00:02:59]
>> Scott: We'll come back to see what happens. Just let me, okay. As somebody tap before, so I can actually continue to build.
>> Scott: We'll get to the Text input, all right. So, we've got all this stuff set up, now let's go ahead and start setting up. Let's see here, let's do the button.
[00:03:24] So onPress, handle, actually we do need to set the stage. So what we'll do is, we'll say on text change, handleChange. HandleChange is going to get the text from the button here. And then what we wanna do is you want to set the State. So this.setState{newTodo: } it's gonna be the text here.
[00:03:46] So we've got that. Constructor, there we go. Now, see why this was freaking out.
>> Scott: Now, it's not freaking out let's just reloaded it and make sure,
>> Scott: Undefined is not an object handlePress.bind.
>> Scott: And wait, did I call it something else? I know, yeah.
>> Speaker 3: You haven't created that yet.
[00:04:28]
>> Scott: Yeah, I haven't created that yet, it's freaking out. Let's do that then, to satisfy it.
>> Scott: There we go. Let's reload.
>> Scott: Okay, looks like it's not freaking out anymore. Let's just reload it again.
>> Scott: There we go. So there's our input, and then there's our button.
[00:04:55]
>> Scott: If yours doesn't look like this, it's because I just changed. I got rid of like the styles under the different component now, so it probably looks different, but it should work the same. So input button, now what we want to do is on change. We got the value, we know this is still working because when we type the values is being updated.
[00:05:15] Again if I got rid of the on change this wouldn't update. So that's there, and then on create what we wanna do is. I'm sorry on handlePress all you wanna do is just set this newTodo state into the todo arrays. So, we'll do the same thing we did on the web.
[00:05:33] We'll get the CONST TODOS = [...this.state.todos] and then the newTodo, which is this.state.newTodo. And then we'll clear it, this.setState. We'll clear it, and then we'll update the todo at the same time, so. Update the todos and then newTodo. It's just that.
>> Scott: All right, so we'll save that.
[00:06:13] Nothing broke. The reason I don't have to refresh is I have on hot reloading. We're gonna talk about that after this solution. So, all that's good to go and then now, if I type some stuff in here we should see this update with some todos. Let's see.
>> Scott: Clean, there we go.
[00:06:35] So there is that one, it's sleep.
>> Scott: Any questions on this stuff so far?
>> Scott: I think the only difference here, the only one difference, obviously, besides the components that we used not be in divs and buttons is that, instead of onChange we use onChangeText. That is only difference.
[00:07:10] Everything else is exactly the same from the web.
>> Scott: So, this will be a diff. This will be an input. This will be a button. This will be our URL. But, everything else is the same except for this.
>> Scott: Any questions? So looks like someone had an error online, application todo is not registered.
[00:07:42] That's because if you were following me, you need to change the main component here. Cuz we have a component called Todo already and I changed this one to the main. So you also need to change that in the registry down below to that component main for both files.
[00:08:04]
>> Scott: Cool.
>> Speaker 4: [INAUDIBLE]
>> Scott: Yes.
>> Speaker 4: Can we ask why it's not outputting the issue? I'm sure if that's it.
>> Scott: It's not outputting the issue, I'm not sure, what issue? But, if it's the issue that I just talked about it definitely says it's not registered, it will say it like it will break.
[00:08:25] And I think it will even spit it out of the console. So I'm not sure what issue, but if it's that issue you should see it.
>> Scott: Yeah, I'll push the solution, for sure. I'll push it after this lecture. Cool, okay. Any questions on the solution?
>> Scott: Cuz now we about to get into, I wasn't installing but I think it's appropriate to do dev tools first, and then we're get to installing after lunch