Part of Todo.js

<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), handleClickSpent)}
        className="spent-btn"
      >
        <FaMoneyCheckAlt />
      </button>

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