Helping Mike

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

/*
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.