Remove Item From Store

Lets first dispatch our removeItem action when user clicks "Remove" button so it delets todo item from the list. Again, what we do, we add this function to our TodoList.tsx container and will pass it to our List.tsx component.

./src/containers/TodoList.tsx

import { useDispatch, useSelector } from "react-redux";
import ListHeader from "../components/ListHeader";
import List from "../components/List";
import { addItem, removeItem } from "../store/actions/todo";
import { useState } from "react";
import { RootState } from "../store/reducers";

function TodoList() {
    const dispatch = useDispatch();
    const [title, setTitle] = useState<string>("");

    const todo: any = useSelector((state: RootState) => state.todo);

    const addItemToList = () => {
        if (!title) return;

        dispatch(addItem(title));
    };

    const removeItemFromList = (item_id: number) => {
        dispatch(removeItem(item_id));
    };

    return (
        <div className="flex justify-center items-center h-screen">
            <div className="shadow-lg rounded-lg w-[500px]">
                <ListHeader
                    addItemToList={addItemToList}
                    title={title}
                    setTitle={setTitle}
                />
                <List
                    list={todo.todo_list}
                    removeItemFromList={removeItemFromList}
                />
            </div>
        </div>
    );
}

export default TodoList;

Also lets make sure that our list is aware of this removeItemFromList prop and it calls it when user clicks Remove button.

./src/components/List.tsx

import { Todo } from "../store/reducers/todo";

interface ListInterface {
    list: Todo[];
    removeItemFromList: Function;
}

function List(props: ListInterface) {
    return (
        <ul className="p-8 pt-0 divide-y">
            {props.list.length > 0 && props.list.map((todo_item: Todo) => (
                <li key={todo_item.id} className="flex items-center p-2">
                    <input
                        type="checkbox"
                        className="h-4 w-4 mr-2 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                        checked={todo_item.is_done}
                    />
                    <p className="w-full">{todo_item.title}</p>
                    <button
                        onClick={() => props.removeItemFromList(todo_item.id)}
                        type="button"
                        className="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-2 py-0.5 bg-white text-base font-medium text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
                    >
                        Remove
                    </button>
                </li>
            ))}
            {props.list.length < 1 && (
                <p>Your todo list is empty, please add some todo.</p>
            )}
        </ul>
    );
}

export default List;

And, that is it, our remove button should work as expected.

Next step would be to connect our mark as done functionality to the store.

---

Last update: March 28, 2022