I have a todo app which I am working on, the intended flow is for the user to input their “Todo” and click create which adds the todo to a list of Todos, with each todo then getting an edit button. The modal is meant to appear on clicking the edit button which would allows the user to describe their todo in detail. However at the moment the Modal is popping up when the user creates the Todo.

THE TODOLIST COMPONENT

import TodoItem from "./TodoItem"
import { useState } from "react"

export default function TodoList( {todos, setTodos} ) {
    const [editingItemId, setEditingItemId] = useState(null)

    function editTask(id) {
        setTodos(todos.map(todo => todo.id === id ? (
            {...todo, isEditing: !todo.isEditing}
        ) : todo
        ));
        setEditingItemId(id)
    }

    

    return (
        <div className="grid grid-cols-4 gap-4">
            {todos.map((todo, index) => (
                <TodoItem 
                key={index} 
                task={todo}
                editTask={editTask}
                editingItemId={editingItemId}
                />
            ))}
        </div>
    )
}

THE TODOITEM COMPONENT

import { useEffect } from "react";

export default function TodoItem({ task, editTask, editingItemId }) {
    useEffect(() => {
        if (task.isEditing && task.id === editingItemId) {
            displayDialog();
        }
    }, [task.isEditing, task.id, editingItemId]);

    function displayDialog() {
        document.querySelector('dialog').showModal();
    }

    return (
        <>
            <div className="col-span-4">
                <h2>{task.task}</h2>
                {task.description ? <p>{task.description}</p> : (
                    <button
                        onClick={() => editTask(task.id)}
                        className="bg-slate-600 hover:bg-slate-900 text-white font-bold px-2 py-1 m-1 rounded-2xl">
                        Describe your task
                    </button>
                )}
            </div>
            <dialog className="flex flex-col p-12 rounded-lg bg-slate-900 text-white">
                <h2 className="uppercase">{task.task}</h2>
                <textarea cols="60" rows="14" className="bg-slate-900 border border-white" />
            </dialog>
        </>
    );
}