Deleting Data
=============

The final step is to implement the delete functionality, which as in the Ember solution, we will implement as an event handler in the ``routes/modules/index.jsx``. Updated that file, to add the

.. code-block:: jsx

    import { readEndpoint, deleteResource } from 'redux-json-api';

    ...

    function deleteModule(ev, module) {
        ev.preventDefault();
        props.dispatch(deleteResource(module));
  }

    ...

    <li>
        <a
            role="menuitem"
            aria-label="Leave"
            title="Leave"
            className="mdi mdi-delete warning"
            tabIndex="0"
            onClick={(ev) => deleteModule(ev, module)}
        ></a>
    </li>

The functionality is very simple, we use the ``deleteResource`` action to tell the Redux JSONAPI reducer to delete the resource. In the ``onClick`` handler, we can use the same inline functionality like we did in the ``Edit`` component and simply call ``deleteModule(ev, module)``. Since we are using functional components and hooks, React knows exactly which module we want to delete and we do not have to manually bind a ``this`` context like we would have to if we were using class components. Here, we want to pass the ``module`` to delete as a parameter and the event that we can use to prevent the default behaviour as another parameter. Thus, when the event is then called we have access to both the ``module`` and ``ev`` parameters in the event handler.

With that we have now implemented the full create-read-update-delete (CRUD) workflow.