Create a ToDo App in React Js | Interview Question

- Tuesday, December 21, 2021

Create a ToDo App in React Js | Interview Question

In this post, you will learn about how to create To-Do App in React using hooks.

I have use arrays of object to save to do list, not redux and required some basic packages like Node and npm.

Following is the UI functionality of the application.

Todo App in React Js

Componets:
There are four component created in our application.
a) ToDoHeader: Created for showing details of Header section.
b) AddToItem: Created for adding text to "ToDo list".
c) AddToDoList: Created for showing "ToDo list".
d) ToDoFooter: Created for showing details of Footer section.

Sample Code:

1) App.js

import React, { useState } from 'react';
import './style.css';

window.id = 0;

const ToDoHeader = () => {
  return <div id="todoHeader"> To Do Applicaation </div>;
};

const AddToItem = (props) => {
  const { text, setText } = props;
  return (
    <>
      <div id="todoAdd">
        <input
          id="todoInput"
          type="text"
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
        />
        <button
          id="save"
          type="submit"
          onClick={() => {
            props.addItem(text);
          }}
        >
          {props.btnName}
        </button>
      </div>
    </>
  );
};

const AddToDoList = (props) => {
  const { deleteTodo, EditTodo, data } = props;

  return (
    <>
      {data &&
        data.length > 0 &&
        data.map((item) => {
          return (
            <>
              <div id="todoListItem">
                <label> {item.todoName} </label>
              </div>
              <div id="todoEditDelete">
                <button
                  id="delete"
                  type="submit"
                  onClick={() => {
                    deleteTodo(item.todoId);
                  }}
                >
                  Delete
                </button>
                <button
                  id="edit"
                  type="submit"
                  onClick={() => {
                    EditTodo(item.todoId);
                  }}
                >
                  Edit{' '}
                </button>
              </div>
            </>
          );
        })}
    </>
  );
};

const ToDoFooter = (props) => {
  const { clearAll } = props;
  return (
    <div id="todoFooter">
      <button
        type="submit"
        onClick={() => {
          clearAll();
        }}
      >
        Clear All
      </button>
    </div>
  );
};

export default function App() {
  const [text, setText] = useState('');
  const [data, setData] = useState([]);
  const [btnName, setBtnName] = useState('Save');
  const [editId, setEditId] = useState(0);

  const addItem = () => {
    if (btnName == 'Save') {
      let obj = { todoId: window.id++, todoName: text };
      let aa = [...data, obj];
      setData(aa);
    } else {
      data.forEach((v) => {
        if (v.todoId === editId) v.todoName = text;
      });
      setData(data);
    }
    setBtnName('Save');
    setEditId(0);
  };

  const deleteTodo = (id) => {
    const delItem = data.filter((item) => {
      return item.todoId != id;
    });
    setData(delItem);
  };

  const EditTodo = (id) => {
    setEditId(id);

    const editItem = data.filter((item) => {
      return item.todoId == id;
    });
    let edittedText = editItem[0].todoName;
    setText(edittedText);
    setBtnName('Update');
  };

  const clearAll = () => {
    setData([]);
  };

  return (
    <div>
      <ToDoHeader />
      <br />

      <AddToItem
        btnName={btnName}
        addItem={addItem}
        setText={setText}
        text={text}
      />
      <br />

      <AddToDoList data={data} EditTodo={EditTodo} deleteTodo={deleteTodo} />
      <br />

      {data && data.length > 0 && <ToDoFooter clearAll={clearAll} />}
    </div>
  );
}

2) style.css

#todoHeader,
#todoFooter {
  width: 470px;
  height: 30px;
  border: 1px solid black;
  text-align: center;
  line-height: 30px;
  background-color: orange;
  border-radius: 10px;
}
#todoListItem {
  width: 330px;
  height: 30px;
  border: 1px solid black;
  background-color: yellow;
  margin-top: 10px;
  border-radius: 10px;
  border-left-width: 10px;
  border-left-color: green;
  float: left;
}

#todoEditDelete {
  width: 120px;
  height: 30px;
  border: 1px solid black;
  margin-left: 350px;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
  display: flex;
  border-radius: 10px;
  background-color: yellow;
}

#delete,
#edit,
#save {
  margin-right: 1px;
  border-radius: 9px;
}

#todoAdd {
  width: 470px;
  height: 30px;
  border: 1px solid black;
  border-radius: 10px;
}

#todoInput {
  margin-left: 10px;
  margin-top: 5px;
  width: 370px;
  margin-right: 10px;
}