Building a Simple To Do App with React
This week, I decided to get some practice with React Hooks. Hooks are such a useful tool, but I haven’t used them enough that I’m as comfortable with them as I’d like to be. So when I came across this tutorial for a to do app that utilizes them, I decided to do it.
The app is relatively simple and only contains three components — Todo, TodoForm, and TodoList. I started with TodoForm, which as the name implies is a component that provides the user with a form to add an item to the to do list. This is also where we face our first hook — useState. After importing it, I set the following so that we could change the state of our form’s input: const [input, setInput] = useState(‘’). In terms of creating the form, it is very similar to the way we would do so in HTML with one very important change: we set the value equal to {input} , and add functions that handle the submission and state changes onSubmit and onChange respectively.
Next, I moved on to the TodoList component. This component makes up a list of all of the to dos added and currently on the list. Similar to the TodoForm component I used useState, but this time replaced input and setInput with todos and setTodos. In this component, I imported and displayed the TodoForm component, which will run an addTodo function I wrote on submission.
However, it is difficult to display the to dos without the Todo component built out! The first step is — you guessed it — setting our useState, this time with edit and setEdit. Then in our return, we create a div that uses a ternary to determine the classname based on its completion status. Within that div, we set the new div’s key to the item’s id (using {todo.id} and give it an arrow function within an onClick that will mark it as completed. Finally, within that div, we display our to do’s text using {todo.text}.
To wrap things up aesthetically, I also used React Icons to import symbols to represent deleting and editing items. Then, I wrote functions that handled removing and editing the items. These functions are called when the buttons are clicked, using an onClick event. When the delete button is pressed, it simply disappears. When the edit button is pressed, our form shows up where the to do had once been and any changes we make in that form replace what was once there. In order to maintain the to do’s text when editing (instead of the default behavior of displaying the blank form), we change const [input, setInput] = useState(‘’) to const [input, setInput] = useState(props.edit ? props.edit.value : ‘’);. We then write a conditional that tells us if we are in the editing phase, the button should read “Update” and the placeholder text should “Update your item”, and if not it should read “Add” and “Add a to do”.
