Hi i am new ish to JavaScript/React and I am currently making a project to practice it more.
I have an expenses list with some expenses all with a unique Id stored as props.items but i'm trying to add a delete button so that an expense will be removed from props.items when its clicked. Is there a way i can remove an item from props.items with the use of the unique ID?
Currently I have this where idNumber is the unique id sent back from the child component ExpenseItem
const onRemoveExpense = (idNumber) => {
console.log("remove clicked", idNumber)
console.log(props.items, "<- all items")
}
return (
<ul className='expenses-list'>
{props.items.map((expense) => (
<ExpenseItem
key={expense.id}
value={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
removeExpense={onRemoveExpense}
/>
))}
</ul>
);
}
Thanks for the help!
The biggest hurdle I see here is that your items array is not in the state of the component in question-- it is passed in as props. So you'd want to define your deletion script in which component is holding the items in its component state. You'd write it somewhere along the lines of:
const onRemoveExpense = (idNumber) => {
this.setState((state, props) => {
// get items from current state
const { items } = state;
// get a new array with only those items that do *not* have the id number passed
const newItems = items.filter((item) => item.id !== idNumber);
// return it to set the new state
return newItems;
});
}
This would obviously need to be adjusted to your specific state and component structure. You'd then pass this as a prop along with the items to the component in question, and call it to trigger a deletion.
For a "hide" function instead of a delete one, you could try adding a shown boolean prop and then change that on click.
But to actually delete it, you'll need to have your items stored in state.
You could try something like this:
const [items, setItems] = useState(props.items)
// set the initial state as `props.items`
// (I'm assuming the code snippet you shared exists inside a functional component)
const onRemoveExpense = (idNumber) => {
console.log("remove clicked", idNumber)
console.log(props.items, "<- all items")
const newItems = items.filter(({ id }) => id !== idToDelete)
setItems(newItems)
}
return (
<ul className='expenses-list'>
{items.map((expense) => (
<ExpenseItem
key={expense.id}
value={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
removeExpense={() => onRemoveExpense(expense.id)}
/>
))}
</ul>
);
}
I might be forgetting something though—I haven't tested the above code. You might need to have a useEffect() to make it re-render properly when the state changes.
Or you can manage the state in the component that is defining items for this component.