So, the problem I've faced is that when I click delete button at any index it just deletes last elementfor example, if I press first delete button, it should remove first input and the delete button, but what it does is that it deletes last element only... What could be wrong?
function App() { const [names, setNames] = React.useState(["First","Second","third","fourth" ]); const onChange= (index: number, editedName: string) => { const mutatedNames = [...names]; mutatedNames[index] = editedName; setNames(mutatedNames); }; function onDelete(index: number) { const nameArr = [...names]; nameArr.splice(index, 1); setNames(nameArr); } return (<div> {names.map((name, index) => (<ChildComponent key={index} name={name} index={index} onChange={onChange} onDelete={onDelete} /> ))}</div> );}const Child = React.memo( ({ name, index, onChange, onDelete }) => { return (<div><input onChange={(event) => onChange(index, event.target.value)} /><button onClick={() => onDelete(index)}>delete</button></div> ); });