Skip to main content Link Menu Expand (external link) Document Search Copy Copied
Last updated: Apr 05, 23 09:42 UTC | Permalink

React Activity - Todo Tracker

This activity is intended to supplement the CS4530 lecture on React and it will let you practice with useState to create a simple todo tracker.

Steps

To get started, download the starter Code. Run the command npm install, and then npm start. The development server should start, and your browser should open showing the handout code.

The goal of this activity is to enhance the starter code so that:

  • The “Add TODO item” will add a new item to the list
  • The “Delete” icon will delete an item from the list
  • Add a “Delete all” button, that will delete all items from the list

After Module 8, you might also consider the following objective:

  • After the list of todo items changes, display a toast confirming that the todo list has changed.

When you are done, submit your work as required by your instructor. This may vary from section to section.


© 2023 Adeel Bhutta, Jan Vitek and Mitch Wand. Released under the CC BY-SA license