kristynp / redux-delete-lab-online-web-sp-000

Set List Lab

Objectives

1. Implement a delete button for each band, such that the store is appropriately updated.

Overview

Well all things change, and sometimes that means that even our favorite bands breakup and we must remove all evidence of them. We want an application that allows us to remove specific bands, and have those changes reflected in our store's state, and on the page.

We are starting off with our work from the previous lab, a React/Redux app that creates new band elements and displays them below. Your task will be to add the deleting a band functionality.

Instructions

The BandInput component is already set up for you and BandsContainer is partially working, but take a moment to note the flow of information. The BandsContainer is connected to Redux and has mapped name => dispatch({ type: "ADD_BAND", name }) to props.

1. Set up the new Band component that is in charge of displaying the information for a single band.

2. Change the structure of the state such that each band has its own id. You will also need to pass through the band object (this should include the id and name of the band) as the props to each rendered Band component. The Band component should be used to render multiple bands, one for each component rendered, using theses props.

3. In the Band component, you will need to add a button that dispatches an action of type 'DELETE_BAND' and then passes through that band's id as the action.id. This dispatched action should be provided as a prop from BandsContainer.

4. You will have to alter the reducer such that it creates a new list of bands that does not include the one whose delete button was pressed.

View Redux Delete Lab on Learn.co and start learning to code for free.