Если я введу текст в инпут, затем нажму кнопку, которая должна удалить соответствующий инпут, то вроде как в стейте все удаляется и все программно вроде ровно, но текст остается в инпуте и визуально кажется, что удаляется последний инпут. Почему так? (Предполагаю, что это из-за того, что при удалении индексы пересчитываются, но как тогда решить эту проблему?) Условный код:
import React, { useState } from 'react';
export default function App() {
const [items, setItems] = useState([1, 2, 3, 4, 5]);
const result = items.map((item, index) => {
return (
<div key={index}>
<button onClick={() => remItem(index)}>{item}</button>
<input type="text" placeholder={index} />
</div>
);
});
function remItem(index) {
setItems([...items.slice(0, index), ...items.slice(index + 1)]);
}
return <div>{result}</div>;
}