Breaking News: Grepper is joining You.com. Read the official announcement!

todo list with typescript

Abhishek answered on December 14, 2023 Popularity 7/10 Helpfulness 5/10

answer todo list with typescript

todo list with typescript

Comment

import React, { useState } from "react";

interface Item {
  id: number;
  text: string;
  completed: boolean;
}

const TodoList: React.FC = () => {
  const [todos, setTodos] = useState<Item[]>([]);
  const [newTodo, setNewTodo] = useState<string>("");

  const handleAdd = () => {
    if (!newTodo.trim()) return alert("Please enter some text");
    setTodos([
      ...todos,
      { id: todos.length + 1, text: newTodo, completed: false },
    ]);
    setNewTodo("");
  };

  const handleCheckList = (id: number) => {
    setTodos((prevTodos) => {
      return prevTodos.map((item) =>
        item.id === id ? { ...item, completed: !item.completed } : item
      );
    });
  };

  return (
    <div className="max-w-md mx-auto p-6 bg-white rounded-md shadow-md">
      <header className="text-2xl font-semibold mb-4 text-center">To-Do List</header>
      <main>
        <div className="flex mb-4">
          <input
            className="flex-1 py-2 px-4 border border-gray-300 rounded-l-md focus:outline-none focus:border-blue-500"
            type="text"
            placeholder="Add Item"
            value={newTodo}
            onChange={(e) => setNewTodo(e.target.value)}
          />
          <button
            className="py-2 px-4 bg-blue-500 text-white rounded-r-md hover:bg-blue-600 focus:outline-none"
            onClick={handleAdd}
          >
            Add
          </button>
        </div>
        <ul className="text-center">
          {todos.map((item) => (
            <li
              key={item.id}
              className={`py-2 px-4 mb-2 border border-gray-300 rounded-md cursor-pointer transition ${
                item.completed ? "line-through" : ""
              }`}
              onClick={() => handleCheckList(item.id)}
            >
              {item.text}
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
};

export default TodoList;

Popularity 7/10 Helpfulness 5/10 Language typescript

Source: Grepper

Tags: list todo typescript

Link to this answer
Share Copy Link

Contributed on Dec 14 2023

Abhishek

0 Answers Avg Quality 2/10

todo list with typescript

Contents

More Related Answers

todo list with typescript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.