title: How to create a confirmation delete popup in React?
body: <p>I am creating a <strong>Todo App</strong>, and trying to create a <strong>confirmation delete popup</strong> which is going to be visible when the user wants to delete a todo.</p>
  <p>In my <code>todo.js</code> component I have created an <code>onClick</code> callback, <code>handleDelete</code>, in my delete button, that callback will set the popup to true making it visible, the problem is that in my <code>handleDelete</code> I pass the <code>Id</code> as argument, so I can track which todo has been clicked and filter it to show the new data updating the todos state, but I only want to do update the data when the user have clicked in the confirm button  that is in the popup.</p>
  <p><strong>App Component</strong>:</p>
  <pre><code>function App() {
    const [inputValue, setInputValue] = useState(&quot;&quot;);
    const [todos, setToDos] = useState([]);
    const [noToDo, setNoToDo] = useState(false);
    const [popup, setPopup] = useState(false);
  
    const handleOnSubmit = (e) =&gt; {
      e.preventDefault();
  
      setNoToDo(false);
      const ide = nanoid();
      const date = new Date().toISOString().slice(0, 10);
      const newToDo = { task: inputValue, id: ide, date: date };
      setToDos([...todos, newToDo]);
      setInputValue(&quot;&quot;);
    };
  
    const handleDelete = (id) =&gt; {
      setPopup(true);
  
      let filteredData = todos.filter((todo) =&gt; todo.id !== id);
  
      {
        /*
      filteredData is the new data, but I only want to update 
      todos with filteredData when the user has clicked on the confirm
      button in the modal component, which execute(handleDeleteTrue)*/
      }
    };
  
    const handleDeleteTrue = () =&gt; {
      setPopup(false);
      setToDos(filteredData);
    };
  
    const handleEdit = (id, task) =&gt; {
      setInputValue(task);
      const EditedData = todos.filter((edited) =&gt; edited.id !== id);
      setToDos(EditedData);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;app_one&quot;&gt;
          &lt;h1&gt;To do app&lt;/h1&gt;
          &lt;form action=&quot;&quot; className=&quot;form&quot; onSubmit={handleOnSubmit}&gt;
            &lt;input
              type=&quot;text&quot;
              placeholder=&quot;Go to the park...&quot;
              onChange={(e) =&gt; setInputValue(e.target.value)}
              value={inputValue}
            /&gt;
            &lt;button type=&quot;submit&quot;&gt;ADD TO DO&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        {noToDo &amp;&amp; &lt;FirstLoad /&gt;}
        {todos.map((todo) =&gt; {
          return (
            &lt;div key={todo.id} className=&quot;result&quot;&gt;
              &lt;Todo
                {...todo}
                handleDelete={handleDelete}
                handleEdit={handleEdit}
              /&gt;
            &lt;/div&gt;
          );
        })}
        {popup &amp;&amp; &lt;Popup handleDeleteTrue={handleDeleteTrue} /&gt;}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>Todo Component:</strong></p>
  <pre><code>const Todo = ({ handleDelete, handleEdit, task, id, date }) =&gt; {
    return (
      &lt;&gt;
        &lt;div className=&quot;result_text&quot;&gt;
          &lt;h3&gt;{task}&lt;/h3&gt;
          &lt;p className=&quot;result_textP&quot;&gt;{date}&lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;button onClick={() =&gt; handleEdit(id, task)} className=&quot;button green&quot;&gt;
            Edit
          &lt;/button&gt;
          &lt;button onClick={() =&gt; handleDelete(id)} className=&quot;button&quot;&gt;
            delete
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  export default Todo;
  </code></pre>
  <p><strong>Modal Component:</strong></p>
  <pre><code>function Popup({ handleDeleteTrue }) {
    return (
      &lt;div className=&quot;modal&quot;&gt;
        &lt;div className=&quot;modal_box&quot;&gt;
          &lt;p&gt;You sure you wanna delete?&lt;/p&gt;
          &lt;button className=&quot;modal_buttonCancel&quot;&gt;Cancel&lt;/button&gt;
          &lt;button onClick={handleDeleteTrue} className=&quot;modal_buttoDelete&quot;&gt;
            Confirm
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default Popup;
  </code></pre>
  <p>I tried to declare <code>filteredData</code> as <strong>global</strong> variable, outside my <code>App</code> component, so when I execute <code>handleDelete</code> it initializes that variable with the filtered data, and only when the user click the confirm button on the popup it executes a new function, <code>handleDeleteTrue</code>, which updates the data to <code>filteredData</code>.</p>
  <p>It works, but declaring variables outside my component is not a good practice, so <strong>is there a better approach?</strong></p>