how to keep the last component styles?

Question

i'm building a to-do app using React Js . inside the task component i used a state to apply a certain styles for the completed task and it works fine . but , after i cliked any delete button the style of the completed task deleted . how can i prevent that ?

import Task from "../Task/Task";
import style from "./TasksList.module.css";

const TasksList = ({ tasks, deleteTaskHandler }) => {
  return (
    <div className={style.tasks}>
      <div className="container">
        {tasks.map((task, idx) => {
          return (
            <Task
              task={task}
              id={idx}
              key={Math.random()}
              deleteTaskHandler={deleteTaskHandler}
            />
          );
        })}
      </div>
    </div>
  );
};

export default TasksList;

import { useState } from "react";
import style from "./Task.module.css";

const Task = ({ task, id, deleteTaskHandler }) => {
  const [isComplete, setIsComplete] = useState(false);

  const markComplete = () => {
    setIsComplete(!isComplete);
  };

  return (
    <div
      className={
        isComplete ? `${style.task}  ${style.completed}` : `${style.task}`
      }
      onClick={markComplete}
    >
      <label>{task.desc}</label>
      <button onClick={() => deleteTaskHandler(id)}> Delete </button>
    </div>
  );
};

export default Task;

Answer 1

How are you maintaining the complete status of task in higher components?

Currently you are not initializing the complete state of Task. If the task object contains the isComplete property, then you can use as shown below

 const [isComplete, setIsComplete] = useState(task.isComplete);

however, you also need to update value of completed in task. So, I would suggest to have all lower components as stateless. and maintain the state at Higher component i.e. TaskList

import style from "./Task.module.css";

const Task = ({ task, id, deleteTaskHandler, setTaskCompleteHandler }) => {

  const markComplete = () => {
    setTaskCompleteHandler(!task.isComplete);
  };

  return (
    <div
      className={
        task.isComplete ? `${style.task}  ${style.completed}` : `${style.task}`
      }
      onClick={markComplete}
    >
      <label>{task.desc}</label>
      <button onClick={() => deleteTaskHandler(id)}> Delete </button>
    </div>
  );
};

export default Task;

Implement setTaskCompleteHandler in TaskList and pass is as prop as part of Task component reandering.

Answer 2

Your problem is in position of your delete button, that wrapped by div with makrComplete handler, so then you click on your delete button, markComplete fired too, so your isComplete changed and styles deleted. To prevent this behavor, you can do a little trick with prevent default. So, try to wrap your deleteTaskHandler in another function like that:

const deleteButtonClickHandler = (e) => {
    e.preventDefault();
    e.stopPropagation();

    deleteTaskHandler(id)
}

and your delete button makrdown should be look like this:

<button onClick={deleteButtonClickHandler}> Delete </button>