todoRef.tsx

import React, { useState, useReducer, useRef } from "react";

const todoListReducer = (
  state: string[],
  action: { type: string; value: string }
) => {
  switch (action.type) {
    case "ADD":
      return [...state, action.value];
    case "REMOVE":
      return state.filter((todo: string) => todo !== action.value);
    default:
      return state;
  }
};

const TodoRef = () => {
  const [todoList, dispatch] = useReducer(todoListReducer, []);
  const todoInputRef = useRef<any>("");

  const todoAddHandler = () => {
    const todoName = todoInputRef.current.value;
    dispatch({ type: "ADD", value: todoName });
  };
  const todoRemoveHandler = (todoItem: string) => {
    dispatch({ type: "REMOVE", value: todoItem });
  };
  return (
    <React.Fragment>
      <input type="text" placeholder="Todo" ref={todoInputRef} />
      <button type="submit" onClick={todoAddHandler}>
        Add
      </button>
      <ul>
        {todoList.map((todo: string) => (
          <ul key={todo} onClick={() => todoRemoveHandler(todo)}>
            {todo}
          </ul>
        ))}
      </ul>
    </React.Fragment>
  );
};

export default TodoRef;