Adding / removing objects in an array based on button click with Redux - reactjs

Question

I have a simple "to-do-list" that I am trying to create that will display a to-do (an object with 4 properties) in a list (an array of objects). I am initializing the list with two to-dos already, and I want the ability to remove a to-do from the list with a button click (the button is held inside the "to-do" component).
Here is the component that creates a single to-do and includes the button for removing it from the list.
import React from "react";
import { useDispatch } from "react-redux";
import "./app.css";
import { remove } from "./redux/ducks/listDuck";
const Listitem = (props) => {
const dispatch = useDispatch();
const handleRemove = (id) => {
dispatch(remove(id));
};
return (
<div className="listitem">
<div className="listItemHeader">{`${props.title}`}</div>
<div className="listItemParameters">
<p>{`Assigned to: ${props.assignedTo}`}</p>
<p>{`Due date: ${props.dueDate}`}</p>
</div>
<button
id={props.id}
type="submit"
className="removeButton"
onClick={handleRemove}
>
Remove
</button>
</div>
);
};
export default Listitem;
I am using the "ducks" method for Redux and below is my state, actions, and reducer:
// State
const initialState = {
toDoListArray: [
{
id: 1,
title: "get groceries",
assignedTo: "bob",
dueDate: "05/14/2021",
},
{
id: 2,
title: "haircut",
assignedTo: "tony",
dueDate: "05/20/2021",
},
],
};
// Add To-Do Action
const ADDtoLIST = "add-to-list";
export const add = (text) => {
return {
type: ADDtoLIST,
text,
};
};
// Remove To-Do Action
const REMOVEfromLIST = "remove-from-list";
export const remove = (id) => {
return {
type: REMOVEfromLIST,
id,
};
};
// Reducer
const items = (state = initialState, action) => {
switch (action.type) {
case ADDtoLIST:
console.log("add");
console.log(action);
return {
...state,
toDoListAray: state.toDoListArray.push({
id: 5,
title: "new to do",
assignedTo: "john",
dueDate: "today",
}),
};
case REMOVEfromLIST:
console.log("remove");
console.log(action);
return {
...state,
toDoListArray: state.toDoListArray.filter((x) => x.id !== action.id),
};
default:
return state;
}
};
export default items;
I believe I have set up Redux appropriately because I am able to delete a to-do from the list by specifying an id in the REMOVEfromLIST case return; however, my problem is that I am unable to figure out how to delete the specific to-do that the user clicked on. In the code above I am using action.id because that was a solution I saw elsewhere, but it doesn't actually delete anything.
I am sure that I am missing something obvious, but I am a beginner and can't seem to figure it out. Any help / suggestions would be welcomed!
I have also put all the code in this CodeSandbox if helpful: https://codesandbox.io/s/to-do-list-o1s0h?file=/src/redux/ducks/listDuck.js

Answer 1

You have to pass the id into the component like:
<Listitem
key={x.id}
id={x.id}
Which enables you to do:
dispatch(remove(props.id));