React Only To Do App

GitHub Repo

App Purpose

I recently made a To Do App using only React in order to regain my familiarity with the React library for frontend design. I would like to use React with a django project in the near future and this small project allowed me to refresh myself with the technology.

App Design

The app uses hooks, specifically the useState hook, to update the state within the React DOM. I used an array for keeping track of my lists and a separate array to keep track of each array of todos. So lists is an array of objects and todos is an array of arrays of objects. This was probably a design flaw as I had to really pay attention to the ids and indexes of everything which really slowed my progres. I should have stored everything in one state object that was more easily utlized throughout the code. I used functions to add and delete lists as well as add and delete todos. I also added the ability to update a todo item although the logistics of using the state with this function is a little finicky. For example, if you click to update the todo item and then switch lists, then click out of the input box you will end up updating the item from another list.

Debugging

One rather large issue I had with my application was I embedded a span element within an li element and both elements had specific functionality called when clicked. The span element called the deleteList function and the li element called the switch list display function which changed the selected state variable I had. Long story short, I was causing multiple state updates when clicking the span element because I was actually registering a click for both tags and it called both functions. I was getting unexpected results that caused errors in my application. My lesson learned was to be very careful when nesting the onClick attribute within JSX tags.

To Do App Images

This shows the entire To Do App with the lists displayed at the top and the selected list items at the bottom.

Whole Page of To Do App

This image shows me adding the ‘Chores’ list to the lists array.

Add List Functionality

Below, you can see the Grocery List. By clicking any list, it will dynamically display that list’s items.

Grocery List

This image shows me adding a new item after deleting the ‘Eat Breakfast’ item.

Add To Do Functionality

This image shows the new item within the To Do List array.

To Do List

Styling

I found some great css styling online and used it within my app. I modified it to fit the context of my project to finish the app with a simple but clean look.

List Styles

Button Styles

Form Styles