Editing and Removing songs


const Item = props => (
  <div className="item">
    **<div className="delete_edit_button">
        onClick={() => props.deleteItem(}
        onClick={() => props.editItem(}

First, we add this two clickable icons on top-right of the Song.

Notice that our event handlers are calling the function props with implicit arguments.

We need to pass [](<>) implicitly here, and we actually don't need the default event.


deleteItem = (itemId) => {
  console.log("DELETE", itemId);
  // TODO

editItem = (itemId) => {
  console.log("EDIT", itemId);
  // TODO

These are the functions that will do the actual deleting and editing of item in state.

We'll finish them later, but it's good to have placeholders for now to be able to pass them as function props.

Passing props from parent to grandchild

If we look at our hierarchy right now:

App: state, functions for deleteItem, editItem


Song: onClick calls function props deleteItem, editItem

App holds the items in its state, so we have to pass the functions deleteItem and editItem as props to SongList, who then passes them to its Song children.

App: ——- deleteItem, editItem——> SongList ——— deleteItem, editItem—-—>Song

Song invokes these function props by attaching them to the onClick event handlers.