wave-03.md

Wave 03: Lifting Up State

Learn Topics: Lifting State Up required for this wave

In Wave 03 we will update the Task List Front End to store state in the App. For this wave you should make sure that that you are on the main branch.

Lifting up state will set us up to connect our front end to our back end API.

We will update and implement the following features:

1. Update the toggle complete feature of each Task to update the state of the task data stored in App.
2. Add a feature to delete a task from the task data stored and rendered by the App.

Lifting Up State

Expand for hints on lifting the state up to App

1. Remove state from the Task component and instead simply render the props.
2. Update App.jsx to store the list of task data in state.
3. Update the data passed to TaskList through props to use the task data stored in state.

Toggle complete feature

Expand for hints on updating the toggle complete feature.

1. Build a function to update an individual task (toggling its isComplete field) in App.
   • This function will need the id of the task to modify.
   • This function will need to update the task data stored in state.
2. Pass this function as a callback through TaskList to Task
3. Update button to receive the callback function in the onClick attribute.

Delete Feature

Expand for hints on implementing the delete feature.

1. Build a function to delete an individual task in App.
   • This function will need the id of the task to delete.
   • This function will need to update the task data stored in state.
2. Pass this function as a callback through TaskList to Task
3. Update button to receive the callback in the onClick attribute.