Item not being removed from an array

Question

I'm having an issue with my code where I cannot remove specific item from my array.

import React, { useState } from "react";
import Outcomeitem from "./Outcomeitem";
import { v4 as uuidv4 } from "uuid";

const Outcome = (props) => {
  const [input, setInput] = useState(0);
  const [expense, setExpense] = useState("");
  const [outcomes, setOutcomes] = useState([]);

  const setInputHandler = (e) => {
    e.preventDefault();
    props.onChangeHandlerOutcome(input);

    setOutcomes([
      ...outcomes,
      {
        name: expense,
        amount: input,
        id: uuidv4(),
      },
    ]);
  };

  const deleteOutcome = (id) => {
    setOutcomes(outcomes.filter((outcome) => outcome.id !== id));
  };

  return (
    <div>
      <form onSubmit={setInputHandler}>
        <label>
          Outcome
          <input
            type="text"
            name="name"
            onChange={(e) => setExpense(e.target.value)}
          ></input>
          <input
            type="text"
            name="name"
            onChange={(e) => setInput(parseInt(e.target.value))}
          ></input>
        </label>
        <input type="submit" value="Submit"></input>
      </form>
      <div>
        <div>
          {outcomes.map((outcome) => (
            <Outcomeitem
              name={outcome.name}
              amount={outcome.amount}
              deleteOutcome={(id) => deleteOutcome(id)}
            />
          ))}
        </div>
      </div>
    </div>
  );
};

export default Outcome;

import React from "react";

const Outcomeitem = ({ name, amount, deleteOutcome, id }) => {
  return (
    <div>
      <div>
        <li>
          {name} : -{amount}${" "}
          <button onClick={() => deleteOutcome(id)}>Delete</button>
        </li>
      </div>
    </div>
  );
};

export default Outcomeitem;

I do have a feeling that it has something to do with me using a useState on the input and the amount - but i'm not entirely sure.

I'm not receiving any kind of error (apart from the unique key props one), it simply does nothing.

would appreciate any kind of help, thanks in advance!

Answer 1

You never pass id as props here

<Outcomeitem
    name={outcome.name}
    amount={outcome.amount}
    deleteOutcome={(id) => deleteOutcome(id)}
 />

Alternatively you can just pass deleteOutcome={() => deleteOutcome(outcome.id)} as props and then directly invoke deleteOutcome from Outcomeitem.

Answer 2

I've figured out why it wouldn't work

at Outcome I've forgot to pass the ID prop in :

            <Outcomeitem
              name={outcome.name}
              amount={outcome.amount}
              deleteOutcome={(id) => deleteOutcome(id)}
            />