bindingHandlers.jsx

    return (<main className="app">
      <h1 className="app__title">To do list</h1>
      <form className="app__form" onSubmit={onFormSubmit}>
        <input type="text" className="app__input" ref={input} />
        <input
          type="submit"
          className="app__input-submit"
          value="Add to list"
        />
      </form>
      <ul className="app__list">
        {state.list.map((listItem, index) => (
          <li className="app__list-item" key={`list-item-${index}`}>
            {listItem.listItemValue}
            <button
              className="app__list-item-delete"
              onClick={() => onDeleteListItem(listItem.uuid)}
            >
              Delete
            </button>
          </li>
        ))}
      </ul>
    </main>)

onDelete.js

  const onDeleteListItem = uuid => {
    deleteNewListItem({
      dispatch,
      payload: {
        uuid
      }
    });
  };

onFormSubmit.js

const onFormSubmit = event => {
  event.preventDefault();

  createNewListItem({
    dispatch,
    payload: { listItemValue: input.current.value }
  });
};

useRef.jsx

import React, { useRef } from "react";

const input = useRef();

<input type="text" className="app__input" ref={input} />