Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Complete the Notes view in React Native

    Tyler McGinnisTyler McGinnis

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

    react-nativeReact Native
    0.3 - 0.53
    reactReact
    0.14 - 16
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss