У меня проблема с моим кодом, когда я не могу удалить определенный элемент из своего массива.
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;
У меня есть ощущение, что это как-то связано со мной, использующим useState для ввода и суммы, но я не совсем уверен.
Я не получаю никаких ошибок (кроме уникального ключевого реквизита), он просто ничего не делает.
буду признателен за любую помощь, заранее спасибо!