Nicole D'Augereaux

[nicolemichelle88]

No description provided.

[canaandavis]

Overall pretty good work.

You didn't really hit any of the extensions, and it still seems like you're struggling with passing things around as props and understanding that flow.

I would encourage you to continue working on this and getting the delete button working as well as other extensions.

You will be challenged with the checkpoint, but keep up the good work and you'll be great!

[canaandavis]

You're really close with this delete button!

Instead of passing in the event, we really want to pass the contacts _id. This means two things for you, first you need to be passing the _id as a prop. That is important so we can access it props._id.

Next you need to update your function to use the _id from props and not the event

onClick={()=> this.onClick(props._id)}

[canaandavis]

See if you can reduce all three of these handle functions into one like we included in the text book.

[canaandavis]

Here is where you need to pass the contacts _id as a prop.

Also, in App.js you passed the function handleDeleteContact as the prop onClick, you need to pass that down one level again here.

You are saying the onClick prop is this._id, a couple of things wrong with that. this._id is undefined, and later inside your Contact component you are trying to call props.onClick() as a function, but its value is undefined so that will be an error.

Really what you want to do is pass the ContactLists onClick prop down to your contact

onClick={this.props.onClick}

something like that should do it for you.

[nicolemichelle88]

I'm doing some remediation with Codeschool and it's helping a bunch! I'm not a quitter. :)

…

On Tue, Feb 7, 2017 at 9:34 AM, Canaan Davis ***@***.***> wrote: ***@***.**** commented on this pull request. Overall pretty good work. You didn't really hit any of the extensions, and it still seems like you're struggling with passing things around as props and understanding that flow. I would encourage you to continue working on this and getting the delete button working as well as other extensions. You will be challenged with the checkpoint, but keep up the good work and you'll be great! ------------------------------ In src/Contact.js <#23 (review)> : > +import React from 'react'; + + + +const Contact = props => { + return ( + <li className="contact"> + <div className="image-cropper"> + <img src={props.avatar} alt="avatar" /> + </div> + <div className="contact-info"> + <h2>{props.name}</h2> + {props.occupation} + </div> + <button className="delete-button" onClick={ + event => this.onClick(event)}>X</button> You're really close with this delete button! Instead of passing in the event, we really want to pass the contacts _id. This means two things for you, first you need to be passing the _id as a prop. That is important so we can access it props._id. Next you need to update your function to use the _id from props and not the event onClick={()=> this.onClick(props._id)} ------------------------------ In src/ContactForm.js <#23 (review)> : > @@ -0,0 +1,82 @@ +import React, { Component } from 'react'; + +class ContactForm extends Component { + constructor() { + super(); + + this.state = { + name: '', + avatar: '', + occupation: '', + }; + } + + handleNameChange(event) { See if you can reduce all three of these handle functions into one like we included in the text book. ------------------------------ In src/ContactList.js <#23 (review)> : > +import React, { Component } from 'react'; +import Contact from './Contact'; + +class ContactList extends Component { + + render() { + return ( + <ul className="contact-list"> + {this.props.contacts.map(contact => { + return ( + <Contact + key={contact._id} + avatar={contact.avatar} + name={contact.name} + occupation={contact.occupation} + onClick={this._id} Here is where you need to pass the contacts _id as a prop. Also, in App.js you passed the function handleDeleteContact as the prop onClick, you need to pass that down one level again here. You are saying the onClick prop is this._id, a couple of things wrong with that. this._id is undefined, and later inside your Contact component you are trying to call props.onClick() as a function, but its value is undefined so that will be an error. Really what you want to do is pass the ContactLists onClick prop down to your contact onClick={this.props.onClick} something like that should do it for you. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#23 (review)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ASUs-76ZzvlXpMxDaT83ObfxeBK3hyePks5raI8KgaJpZM4L42Ko> .

[canaandavis]

Great Job getting that delete button in there!!