Skip to content

Instantly share code, notes, and snippets.

@dduleone

dduleone/helping_mike.js

Last active January 30, 2019 16:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dduleone/e729ad490dd1255df2ff0fba64a50488 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dduleone/e729ad490dd1255df2ff0fba64a50488 to your computer and use it in GitHub Desktop.
Download ZIP
Helping Mike
Raw
helping_mike.js
import React, { Component } from 'react'
import ListContacts from './ListContacts'
class App extends Component {
state = {
contacts: [
{ id: 'Mike',
name: 'CampyandtheGoodVibes',
handle: '@CampyandtheGoodVibes'
},
{ id: 'Jon',
name: 'Jonny Biscuits',
handle: '@JBandtheGravy'
},
{ id: 'Lauren',
name: 'LaLa',
handle: '@InsaneintheUkraine'
},
]
}
removeContact = (contact) => {
this.setState((currentState) => ({
contacts: currentState.contacts.filter((c) => {
return c.id !== contact.id
})
}))
}
render() {
return(
<div>
<ListContacts
contacts={this.state.contacts}
onDeleteContact={this.removeContact}
/>
</div>
)
}
}
export default App
@dduleone
Copy link
Author

dduleone commented Jan 30, 2019

/*
From Mike: The code block I tried to highlight is what I would like a better explanation of, I think If I could more fully grasp what's happening with the removeContact Component I could more easily emulate it to create a component to add contacts and update contacts so I can start writing code with these concepts from scratch fluidly to build more involved applications.
*/

First removeContact is not a "component". It's a "function". (Components should start with capital letters.)

Second, let's break down the function:

  1. It takes a parameter "contact", and does not return anything.
  2. It calls this.setState() and passes a function as the parameter.
  3. This anonymous function takes a currentState parameter, and returns an object with a contacts property.
  4. The contacts property is set based on expecting the currentState object to have a contacts property, which is expected to be an Array, and have the filter method applied to it.
  5. The filter method looks through each value in the currentState.contacts array, and will return any items that do not match the id value on the contact parameter that was passed into removeContact.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment