Skip to content

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.

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;


    const removeItemFromList = (item_id: number) => {

    return (
        <div className="flex justify-center items-center h-screen">
            <div className="shadow-lg rounded-lg w-[500px]">

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.

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 && Todo) => (
                <li key={} className="flex items-center p-2">
                        className="h-4 w-4 mr-2 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
                    <p className="w-full">{todo_item.title}</p>
                        onClick={() => props.removeItemFromList(}
                        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"
            {props.list.length < 1 && (
                <p>Your todo list is empty, please add some todo.</p>

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