Editing and Removing songs

Song.jsx

const Item = props => (
  <div className="item">
    **<div className="delete_edit_button">
      <span
        onClick={() => props.deleteItem(props.item.id)}
        role="img"
        aria-label="close"
      >
        ❎
      </span>
      <span
        onClick={() => props.editItem(props.item.id)}
        role="img"
        aria-label="edit"
      >
        📝
      </span>
    </div>**
		...

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 [props.item.id](<http://props.item.id>) implicitly here, and we actually don't need the default event.

App.jsx

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

SongList:

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.