⚠️ This lesson is retired and might contain outdated information.

Complete the Notes view in React Native

Tyler McGinnis
InstructorTyler McGinnis
Share this video with your friends

Social Share Links

Send Tweet
Published 10 years ago
Updated 2 years ago

In this final React Native lesson of the series we will finalize the Notes view component and squash a few bugs in the code.

[00:00] We finished our notes component. The very last thing we need to do is go back to our dashboard and tie it to this button. The first thing I'm going to do is I'm going to acquire our notes component. Then, in here, you might remember that our notes is expecting to receive userInfo and some notes.

[00:23] What we need to do is we need to grab those notes before we take the user to this route. We're going to do api.getNotes. We're going to pass it the user name. Then, that will return us a promise with the response of the data. Then, what we're going to do is we're going to just check to make sure this is the thing.

[00:45] We're going to say res=res or if that's not true, then we're just going to make an empty object. This will help us if we have no notes. It's not going to error out because our list view is expecting to receive an object whether that's empty or whether that's not. We just have that checked.

[01:03] Then, what we can do is as we've always done. Go to our new component. The component is going to be, notes. The title is going to be, notes. The properties we're going to pass to it is, notes, which is our response, and userInfo which we're getting from the .props.userInfo.

[01:30] Now that that's done, let's go ahead and double check that this is all working. I fixed a few bugs. We had a semicolon in this object right here and then React wasn't capitalized. Also, you'll notice, and I've done this quite a bit because I forgot to return something from render, so we're just going to throw this into here.

[01:54] Now, let's check where we're at. We're going to recompile, search for the user name. Good so far. There we go. Let's go ahead and add first note.

[02:08] There were go. That's our error. This needs to be renderRow and not just render. Now let's try it. We search for a username, a few notes. There we go. Our setting's working. We can add a new note. There we go.