Edit form in Todo List React Redux App (with hooks)

I learned some React in my Software Engineering boot camp, but never got the opportunity to really learn about hooks, which are becoming more used in React today. I graduated with little to no experience using hooks. So I decided that the first project I built after graduation I would attempt to use hooks for the first time!

This definitely was not easy for me considering I had no notes to look back on and no past projects to reference for any questions. I decided to create a Todo List app for simplicity and to be able to try and implement all CRUD functionality.

I started with my backend in Rails with two models with the following attributes:

1. List — title: string completed: boolean

2. ListItem — description: string completed: boolean list_it: integer

Then I set up my app with 3 buttons in the navbar — Home, Lists, and Create a new list:

1. Home — just tells you a little about the app and its functionality
2. Lists — Displays all of the lists in the database by their titles. Each title is a link to that list’s page
3. Create a new list — Displays a small form to type in your new list title. After submitting it brings you back to the “lists” page to see all created list titles as links.

When you click on the title of an individual list (in the Lists button) it brings you to that list show page where it displays the title, all the list items, a form to add another list item, and a delete button at the bottom to delete the entire list.

Next to each list item, there are two buttons — a garbage can (delete) and an edit symbol. I got these from this react-icons site.

See picture for reference:

Getting the functionality working for the delete button was fairly easy. But with the edit button, I was trying to figure out the best way to implement an edit form considering there was already a form on the page for adding the list items.

I realized I wanted to make it so when the user clicks the edit button, I want a form to pop up right where the list item is on the page with the old list item pre-filled in to be edited.

Here is how I decided to implement it: I was using redux to hold my applications state for easier management, so I already knew I was going to be dispatching the new updated list item to the redux store in order to update it. First I created some variables in the ListItem component with useState( ). One called “edit” that was initially set to false and one called newItem that was set to the current item description like so:

const [edit, setEdit] = useState(false)
const [newItem, setNewItem] = useState(item.description)

Then I used an onClick event listener so when the user clicked the edit button, we set the variable of edit to equal true instead of false:

<FiEdit className="edit-icon" onClick={() => setEdit(true)}/>

Then before my return statement, I placed a small conditional that checks if “edit” is true. When it is true it renders this form (right where the list item was on the page) with the item description prefilled as the value.

if(edit){ 
  return (
    <form onSubmit={(event) => handleSubmit(event)}>
        <input
            className="input"
            value={newItem}
            onChange={(e) => setNewItem(e.target.value)}
            placeholder="Edit your list"
         />
    </form>
 )
}

Then I used to onChange to set the new item with whatever was being typed in the form field. Once the form is submitted the new list item is dispatched to the redux store to be updated, and then edit is set to “false” therefore removing the edit form from the page and showing the new updated list item on the page.

I am not sure if this is the best way to go about this, but it did sure feel great figuring it out on my own and it worked great! I hope this can help anyone in the future when building their own Todo / List app.