Why my green border doesn’t toggle?(disappear)

Why I can’t toggle the className in each div?
I want to give each div a green border when I double click on h1 tag inside each div and
when I double click again I want border to disapper
I put image for you to understand my situation
If you don’t get the problem comment under the question

const { useState, Fragment } = React;
const tasks = [
    {
        id: 1,
        title:
            "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
        body: "quia et suscipitnsuscipit recusandae consequuntur expedita et cumnreprehenderit molestiae ut ut quas totamnnostrum rerum est autem sunt rem eveniet architecto",
        reminder: false,
    },
    {
        id: 2,
        title: "qui est esse",
        body: "est rerum tempore vitaensequi sint nihil reprehenderit dolor beatae ea dolores nequenfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendisnqui aperiam non debitis possimus qui neque nisi nulla",
        reminder: false,
    },
    {
        id: 3,
        title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
        body: "et iusto sed quo iurenvoluptatem occaecati omnis eligendi aut adnvoluptatem doloribus vel accusantium quis pariaturnmolestiae porro eius odio et labore et velit aut",
        reminder: false,
    },
];

function Tasks() {
    const [initial_tasks, setTasks] = useState(tasks);
    const onDelete = (the_id) => {
        setTasks(initial_tasks.filter((task) => task.id !== the_id));
    };
    const toggle = function (the_id) {
        setTasks(
            tasks.map((task) =>
                task.id == the_id ? { ...task, reminder: !task.reminder } : task
            )
        );
    };

    return (
        <Fragment>
            {initial_tasks.length
                ? initial_tasks.map((task) => (
                        <div className={`task ${task.reminder ?                     "reminder-style" : ""}`}>
<h1 onDoubleClick={() => toggle(task.id)}>{task.id}</h1>
                            <p
                                onClick={() => {
                                    onDelete(task.id);
                                }}
                            >
                                {task.title}
                            </p>
                        </div>
                  ))
                : "no items"}
        </Fragment>
    );
}

.reminder-style {
    border: 3px solid green;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0/umd/react-dom.development.js"></script>

Answer

Check this part of the code.

const toggle = function (the_id) {
  setTasks(
    tasks.map((task) =>
      task.id == the_id ? { ...task, reminder: !task.reminder } : task
    )
  );
};

You are always checking with tasks variable which is a constant value. Instead of that use your initial_tasks. You’ll get your functionality.

Advertisement

Answer