Я создаю приложение на React и мне понадобилось редактировать отдельно взятые элементы в списке объектов:
export default function Component() {
const [dialogs, setDialogs] = useState([]);
useEffect(() => {
setDialogs([
{lastMessage: 'fff'},
{lastMessage: 'dd'},
{lastMessage: 'a'}
]);
}, [setDialogs]);
function editLastMessage(index) {
let edited = dialogs;
edited[index].lastMessage = 'dsad';
setDialogs(edited);
}
return (
<div>
{
dialogs.map((element, index) => {
return (
<div key={index}>
<Test lastMessage={dialogs[index].lastMessage}/>
<button onClick={() => editLastMessage(index)}>click me!</button>
</div>
);
})
}
</div>
);
}
как мне изменить state[index] так, чтобы компонент автоматически обновлялся?