Todo.js - Krutik

import React, { useState } from "react";
import { FaMoneyCheckAlt, FaDollarSign, FaTrash } from "react-icons/fa";
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

toast.configure();

const Todo = ({ text, todo, todos, setTodos }) => {
  // Events
  const deleteHandler = () => {
    setTodos(todos.filter((element) => element.id !== todo.id));

    toast.error("Deleted todo", {
      position: "top-right",
      autoClose: 2000,
      hideProgressBar: false,
      closeOnClick: true,
      pauseOnHover: true,
      draggable: true,
      progress: undefined,
    });
  };

  const [isSpent, setIsSpent] = useState(false);
  const [isReceived, setIsReceived] = useState(false);

  return (
    <div className="todo">
      <div className="bar-tag-container">
        <li className={`todo-item ${todo.completed ? "completed" : ""}`}>
          {isSpent && <p className="tag">Spent</p>}
          {isReceived && <p className="tag">Received</p>}
          <div className="others">${text}</div>
        </li>
      </div>

      <button onClick={() => setIsSpent(!isSpent)} className="spent-btn">
        <FaMoneyCheckAlt />
      </button>

      <button
        onClick={() => setIsReceived(!isReceived)}
        className="receive-btn"
      >
        <FaDollarSign />
      </button>

      <button onClick={deleteHandler} className="trash-btn">
        <FaTrash />
      </button>
    </div>
  );
};

export default Todo;