title: How to add a warning/notification for a delete button in React?
body: <p><code>ImagesUpload.jsx</code> --&gt; the Presentational component
  <code>deleteImageWarning.jsx</code> --&gt; the Notifications component
  <code>index.js</code> --&gt; where I exported the deleteImageWarning function</p>
  <h1>The goal</h1>
  <p>I want to include a notification or popup in my React app that alerts the user and gives them the choice to either cancel or confirm an action, in this case, deleting an image attached to a job sheet. This notification should be triggered when the user clicks the Delete button located next to the image that has been attached to the page.</p>
  <h1>Where to look for the issue</h1>
  <p>What I wrote (please have a look below) is not working whatsoever. I feel there is something wrong with the <code>validateBeforeDelete</code> function; I just wanted to have something that returns the notification function with the right values in the DOM. In addition, I am missing what to write in the Content section in the deleteImageWarning component.</p>
  <h1>Brief overview</h1>
  <p>To give you an idea, the button's delete functionality was working perfectly fine prior to working on the notification. There is a container for the ImagesUpload file, therefore, we could state that the <code>ImagesUpload.jsx</code> file is the Presentational Component and there is a <code>ImagesUploadContainer.jsx</code> file that acts as the Container Component for the Presentational Component.</p>
  <h1>The issue</h1>
  <p>The problem is that I don't know how to pass the delete function that I declared in the <code>ImagesUpload.jsx</code> file to the <code>deleteImageWarning.jsx</code> component. And that's surely what I am missing in the Content constant of my deleteImageWarning component. Does it have anything to do with the constants declared in my <code>render()</code> function?</p>
  <p>ImagesUpload.jsx</p>
  <pre><code>    //importing the deleteImageWarning function
      import {
        deleteImageWarning,
      } from '../common/notifications';
      
      //this is the function that deletes the image with the required values
        async handleDeleteImage (jobsheetId, imageId) {
          this.props.deleteImage({jobsheetId: jobsheetId, imageId: imageId});
        }
      
      //this is a validate function that is supposed to trigger the deleteImageWarning function
        validateBeforeDelete = (jobsheetId, imageId) =&gt; {
          return deleteImageWarning(this.notificationDOMRef.current, () =&gt; this.handleDeleteImage(jobsheetId, imageId));
        }
      
      render() {
      const { ... } = this.props;
      const { ... } = this.state;
      return (
      //TO BE AWARE! the following delete button with an onClick function has been written using React final form's syntax
      ...
      &lt;StyledSectionColRight&gt;
        &lt;Button red type=&quot;button&quot; onClick={() =&gt; this.validateBeforeDelete(id, image.id)}&gt;Delete&lt;/Button&gt;
      &lt;/StyledSectionColRight&gt;
      ...
      );
      }
      
      export default ImagesUpload;
  </code></pre>
  <p>index.js</p>
  <p>(Nothing really important, just in case someone thinks the error is due to not exporting deleteImageWarning)</p>
  <pre><code>    //deleteImageWarning included in the index.js file
      export { default as deleteImageWarning } from './deleteImageWarning';
  </code></pre>
  <p>deleteImageWarning.jsx</p>
  <pre><code>    import React from 'react';
      import styled from 'styled-components';
      import { Button, ButtonInverted } from '../button';
      
      const StyledNotification = styled.div`
        background: var(--white);
        padding: var(--spacer-m);
      `;
      
      const StyledMessage = styled.p`
        font-size: var(--font-s);
        line-height: var(--lineHeight-s);
        margin: 0 0 var(--spacer-l) 0;
      `;
      
      const Content = ({ ????? }) =&gt; (
        &lt;StyledNotification&gt;
          &lt;StyledMessage&gt;
            Are you sure you want to delete this image? This process cannot be undone.
          &lt;/StyledMessage&gt;
          &lt;Button type=&quot;button&quot; red onClick={?????}&gt;Confirm&lt;/Button&gt;
          &lt;ButtonInverted type=&quot;button&quot;&gt;Cancel&lt;/ButtonInverted&gt;
        &lt;/StyledNotification&gt;
      );
      
      const deleteImageWarning = (node, ?????) =&gt; {
        node.addNotification({
          content: &lt;Content ?????={?????} /&gt;,
          type: &quot;info&quot;,
          title: &quot;&quot;,
          message: &quot;&quot;,
          insert: &quot;top&quot;,
          container: &quot;top-center&quot;,
          animationIn: [&quot;animated&quot;, &quot;fadeIn&quot;],
          animationOut: [&quot;animated&quot;, &quot;fadeOut&quot;],
          dismissable: { click: true },
          width: 400
        });
      }
      
      export default deleteImageWarning;
  </code></pre>
  <p>To make it super obvious, I have added a few question marks in the code to highlight where I don't know what to write.</p>