ToDo List App for Beginners in React

Todo list is a simple list of things that you might want to do, basically which can be written on a piece of paper. ToDo list app is really good and simple way to understand the fundamentals of React.

In this post let's see how it is done, before that these are the links of source code and app on StackBlitz.

GitHub link: https://github.com/akshayrak/react-todo-app.git
StackBlitz codeLink: https://stackblitz.com/edit/react-todo-app-1234?file=src/components/todo.js
Application link: https://react-todo-app-1234.stackblitz.io/?inputTodo=hello

import React, { useState } from 'react';

const Todo = () => {

  const [input, setInput] = useState();
  const [items, setItems] = useState([]);

  const addHandler = e => {
    e.preventDefault();
    if(input){
      setItems([...items,input]);
      setInput('')
    }
  }

  const deleteHandler = (ele) =>{
    setItems(items.filter((x)=>x!==ele))
  }

  return (
    <div>

      <form onSubmit={addHandler}>
        <input
          type="text"
          id="inputTodo"
          name="inputTodo"
          placeholder="type a task"
          onChange={(e) => setInput(e.target.value)}
          value={input}
        />
        <button type="submit">Add</button>
      </form>

      <div>
        {items.map((ele, i) => {
          return (
            <div key={i}>{ele}
             <button onClick={()=>deleteHandler(ele)}>X</button>
            </div>
        )})}
      </div>

    </div>
  );
};
export default Todo;

We start it with importing React and useState hook, and create a functional component.

For taking input create a small form with a submit button

<form onSubmit={addHandler}>
        <input
          type="text"
          id="inputTodo"
          name="inputTodo"
          placeholder="type a task"
          onChange={(e) => setInput(e.target.value)}
          value={input}
        />
        <button type="submit">Add</button>
      </form>

we create input state for holding the single todo

const [input, setInput] = useState();

and items for holding the entire todo list

const [items, setItems] = useState([]);

so in the form we assign input to value attribute and set the onChange event to setInput() using event.target.value

onChange={(e) => setInput(e.target.value)}
value={input}

when ever the form is submitted we submit it to addHandler method

onSubmit={addHandler}

In the addHandler method we check whether something is typed or not so that we don't create empty items, since we have assigned the value of the input tag to 'input' state we can do this check.

const addHandler = e => {
    e.preventDefault();
    if(input){
      setItems([...items,input]);//spreed operator for existing items
      setInput('')//set the input to empty string, so that input box is empty after adding the item
    }
  }

Now we create some more code for displaying and deleting the items with the help of map method

<div>
        {items.map((ele, i) => {
          return (
            <div key={i}>{ele}
             <button onClick={()=>deleteHandler(ele)}>X</button>
            </div>
        )})}
      </div>

    </div>

Once we click the delete button it triggers the deleteHandler function by passing the element as parameter in which we delete the item just by filtering out the sent element and setting the remaining items to setItem()

const deleteHandler = (ele) =>{
    setItems(items.filter((x)=>x!==ele))
  }

That is the complete app, let me know if there is any better way to implement the same.

Image used in this post is a Photo by Glenn Carstens-Peters on Unsplash