The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App: Managing State in Child Components

Building a React.js App: Managing State in Child Components

10:26
In this video, we’ll walk through how to better manage your state by learning how to manipulate the state of a parent component from a child component.
Watch this lesson now
Avatar
egghead.io

In this video, we’ll walk through how to better manage your state by learning how to manipulate the state of a parent component from a child component.

Avatar
David

A quick question, is the username prop really needed in the AddNote component ? It doesn't seem to be used:

[https://github.com/tylermcginnis/github-notetaker-egghead/blob/07-managing-state-in-children/app/components/Notes/AddNote.js]

(Also the given link to the code has a spurious space in the url)

In reply to egghead.io
Avatar
Joel

Spurious space obliterated! Thanks :>

In reply to David
Avatar
Tyler

Hi David,

Good catch. It's indeed not needed. Not sure why I threw that in there.

Tyler

In reply to David
Avatar
Kendall

Found I had to add ['.value'] to the NotesList render to get just the value back and not the key as well.

So it becomes

{note['.value']}

Avatar
Marcelo

I am getting an error in the browser console Uncaught Error: Firebase.set failed: First argument contains an invalid key (.key) in property 'jakelingwall.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"

Avatar
Richard

I don't know why it is happening but if you change package.json from reactfire ^0.5.0 to ^0.4.0 and then calling npm install... it will fix this problem.

The demo app was built using ^0.4.0 - so it is probably a reasonable fix ... see package.json on https://github.com/tylermcginnis/github-notetaker-egghead

Rich

In reply to Marcelo
Avatar
Joel

We will update these lessons at some point to reflect the new ReactFire library, but for now, you will want to use v0.4.0

npm install reactfire@0.4.0 --save

In reply to Junhak
Avatar
Jim

To take advantage of the current firebase API you need to add the note like this:

handleAddNote: function(newNote){
this.firebaseRefs['notes'].push({
text: newNote
});
}

Also to properly display the contents of a note you'll want to do use the text attribute as the objects in the notes array are objects not strings:

var notes = this.props.notes.map(function(note, index){
return <li className="list-group-item" key={index}>{note.text}</li>
})

In reply to Marcelo
Avatar
Whitney

Thanks Jim.

So to clarify for everyone getting the "Uncaught Error: Firebase.set failed: First argument contains an invalid key (.key)" error, you can maintain your latest version of reactfire in package.json but you have to make the simple changes as Jim has specified above. That should fix the error.

In reply to Jim
Avatar
david

this was super helpful!

In reply to Jim
Avatar
Farooq Ali

Following works for me in Profile.js:

handleAddNote: function(newNote, username){
    this.ref.child(username).push(newNote);
  },

And in NoteList.js:

var notes = this.props.notes.map(function(note, index){
      return <li className="list-group-item" key={index}> {note['.value']} </li>
    });
In reply to Jim
Avatar
Minfa

I saw that in the video the 'addNote' function was created under the 'Profile' component, and got passed as props to the 'Notes' and 'AddNote' components.

I wonder is there any benefits of doing so? In my point of view, it seems more appropriate to move the 'addNote' function into the 'AddNote' component because it what this component should handle, right?

Thanks.

Avatar
amitgaur

That would require you to move all the state to the AddNote.js : firebase et all..wouldn't really work since you need to update the NoteList whenever you add a note. Thats why a Mixin is used here.

In reply to Minfa
Avatar
John

I was wondering the same thing, Minfa. Would love to get a response here. What's the benefit? Seems like it only adds more complexity in having to require it at each level as well.

In reply to Minfa
Avatar
Joel

There is always more than one way to skin a cat, but the profile seems like a "connected" or "smart" component, versus the notes which are "pure" or "dumb" components and just take whatever they are fed.

In reply to John
Avatar
egghead.io

The lesson video has been updated!

Avatar
Alan

Great video. Out of curiosity, would it be tough to submit the note by pressing the enter key instead? Any tips or a guide you can suggest for doing this?

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?