To Do Part 2

Last week I started a blog about making a todo list, and we got our app basic setup. To review you can head here, this week I thought we add a little bit more functionality to it. Lets recap what we have so far though…

import React, { useState } from 'react'
function Todo({ todo }) {
  return (
    <div className='task'> 
     {todo.content} //shows our todos
   </div>
 )
}
function App() {
const [todos, SetTodos] = useState(     //initial state
[
  { content: "Get Out Of Bed" },
  { content: "Brew Coffee" },
  { content: "Make Breakfast" }
]) //setting our todos with a key and value to return ...
return (
<div className="App">
 <div className='todo-list'>
  {todos.map((todo, index) => (  //mapping over each todo
   <Todo
   key={index}                  //setting index of todo
   index={index}
   todo={todo}                  //setting todo to our todo
   />
  ))}
 </div>
</div>
);
}
export default App;

Ok, as we can all we can do right now is display a list of todos, which is great but let’s add some functionality. First let’s go ahead and add a way to add and remove new todos to our list. In order to create our addTodo function we will pass our content(which is our todo) and set newTodos using the spread operator to pass in the previous todos. We will then go ahead and pass are content(our todo) and setTodos to our newTodos…

...
const addTodo = content => {
 const newTodos = [...todos, { content }];
 setTodos(newTodos);
};

Second, lets go ahead and create a way to remove todos, in order to do this instead of passing the content, we will go ahead and take the index of the todo we are looking to remove, from there we will something similar as before and take newTodos and spread our previous todos. Instead of using content however we will use the splice method to remove said todo and then setTodos(newTodos)..

...
const removeTodo = index => {
 const newTodos = [...todos];
 newTodos.splice(index, 1);
 setTodos(newTodos);
};

Third, let’s go ahead and create a way to access a specific todo when we want to have it deleted. We will create a new function that takes in our todo, index and removeTodo and place a onClick on a button for each todo in order to have the one we want removed…

function Todo({ todo, index, removeTodo }) {
return (
 {todo.content}
 <button onClick={() => removeTodo(index)}> X </button>
 </div>
 )
}

Let’s also go ahead and create a way to add todos to our list. In order to do this we will create a form, in this form we will have a handleSubmit function that once executed it will add a new todo to our list…

...
function TodoForm ({ addTodo }) {
 const [value, setValue] = useState('');
const handleSubmit = e => {
 e.preventDefault()
 if (!value) return;
 addTodo(value);
 setValue('')
};
return (
  <form onSubmit={handleSubmit}>
  <input
  type='text'
  className='input'
  value={value}
  onChange={e => setValue(e.target.value)}
  />
   <button type='submit'> Add Todo </button>
  </form>
  )
}
...

Finally, we can add these new functions to our Todo …

return (
<div className="App">
 <div className='todo-list'> 
 {todos.map((todo, index) => (
     <Todo
     key={index}
     index={index}
     todo={todo}
     removeTodo={removeTodo}
     />
   ))}
   <TodoForm  addTodo={addTodo}/>
   </div>
  </div>
 );
}

At the end we should have something like this…

Not the prettiest, can definitely use some CSS, but I will leave that to you for styling…

Happy Coding!