React/JavaScript remove something from props.items

Question

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!

Answer 1

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.