Van bljw

Creating a Todo list with React

I have worked on a small project where you can create a todo list that shows the basic functionality of React. You can do much more things with React, for to keep this article concise I've mainly focussed on the basics. In this article I'll highlight some code from that project to provide some

Setting up

To create a react application to first need an empty folder that has no capital letters of spaces in its name. You can then run the following command in your terminal:

            
  npx create-react-app .
            
          

This will install react into your folder. It should take a few minutes to get everything ready. Once all the files are installed you get a basic application structure for your app. I have deleted all the standard markup and added files for my todo list. To run the application you can use

            
npm start
            
          

Rendering the appv

When looking at the index.html file you see that there only is an empty div element.

            
<div id="root"></div>
            
          

When we look at the index.js file in the src folder we see that this empty div is used to render the application.

            
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
)
            
          

ReactDOM.render() takes two arguments. The first argument takes the App component we want to render and the second take the element that serves as a target container for the content.

Adding markup

In the App.js component I can now add markup for my Todos. The problem is that I need to return both the Todo list and the buttons to create or clear completed todos. As you know a return only can return a single value. In React you can use Fragments to wrap different HTML elements together so they can be returned as a single value.

          
return (
  <>
    <TodoList todos={todos} toggleTodo={toggleTodo} />
    <input ref={todoNameRef} type="text" />
    <button onClick={handleAddTodo}>Add Todo</button>
    <button onClick={handleClearTodos}>Clear completed todos</button>
    <div>{todos.filter(todo => !todo.complete).length} left to do</div>
  </>
)
          
        

Managing the state

I can manage the state of my component to react on user interaction. For my Todo list that is when the user sets a todo as completed using a checkbox. To enable this I can use the useState hook from React to rerender the component every time the data changes.

          
const [todos, setTodos] = useState([])

...

<TodoList todos={todos} toggleTodo={toggleTodo} />
          
        

The TodoList component

The Todolist component is al list that has all of our todos. In this component we can now use the prop to map over all our todos and render a todo that is also a seperate component. When using map() to render new components you need to be careful however, because when a component gets updated React doesn't know which component to update because it can't destinguish them from each other. To fix this you can add a key attribute to the component that has a unique Id.

          
import Todo from './Todo'

export default function TodoList({ todos, toggleTodo }) {
  return (
    todos.map(todo => {
      return <Todo key={todo.id} toggleTodo={toggleTodo} todo={todo} />
    })
  )
}
          
        

The Todo component

The last component is our Todo component itself that has the todo name and complete checkbox.

          
export default function Todo({ todo, toggleTodo }) {
  function handleTodoClick() {
    toggleTodo(todo.id)
  }

  return (
    <div>
      <label>
        <input type="checkbox" checked={todo.complete} onChange={handleTodoClick} />
        {todo.name}
      </label>
    </div>
  )
}
          
        

Handling events

We've passed the toggleTodo function as a prop all the way from our App component. Here we can create the function to toggle completed todos.

          
// set todo complete to opposite value
function toggleTodo(id) {
  const newTodos = [...todos]
  const todo = newTodos.find(todo => todo.id === id)
  todo.complete = !todo.complete
  setTodos(newTodos)
}
          
        

In our HTML amrkup I also added a create Todo button. This also has a click event to create new todos. Lets make that function now as well.

          
// handle add todo button
function handleAddTodo(e) {
  const name = todoNameRef.current.value
  if (name === '') return
  setTodos(prevTodos => {
    return [...prevTodos, {id: uuidv4(), name: name, complete: false}]
  })
  todoNameRef.current.value = null
}
          
        

In this function I also use the setTodos function from my state to create new todos. Here I use prevTodos as argument for all my previous todos and I add a new todo to the array with an unique uuid.

Persistant data

Now we can both add todos and complete them using the checkbox. When the user clicks on the checkbox the Todo component automatically updates. The problem here is that if we reload our page the todos do not persist. To fix this we can use localStorage to save the todos so the component loads the data. We also need to use a new React hook that excecutes every time the component is rerendered. This hook is called useEffect().

          
// get stored todos
useEffect(() => {
  const storedTodos = JSON.parse(localStorage.getItem(LOCAL_STOARGE_KEY))
  if (storedTodos) setTodos(storedTodos)
}, [])

// save todos to local storage every time the array changes
useEffect(() => {
  localStorage.setItem(LOCAL_STOARGE_KEY, JSON.stringify(todos))
}, [todos])
          
        

With that our TodoList will now also be persitant and our React app is compeltely finished.