Реактивные операции над массивами объектов в React
Давайте теперь научимся делать реактивные
операции над массивами объектов. В этом
случае мы должны передать в функцию
id элемента массива, с которым
мы собираемся что-то делать:
function App() {
const [notes, setNotes] = useState(initNotes);
const result = notes.map(note => {
return <li key={note.id}>
<span>{note.prop1}</span>
<span>{note.prop2}</span>
<span>{note.prop3}</span>
<button onClick={() => doSmth(note.id)}>
btn
</button>
</li>;
});
return <div>
<ul>
{result}
</ul>
</div>;
}
Для того, чтобы что-то сделать с элементом, мы сначала должны найти его, перебрав весь массив циклом:
function App() {
...
function doSmth(id) {
setNotes(notes.map(note => {
if (note.id === id) {
// что-то делаем с элементом
}
return note;
}));
}
}
Давайте для примера поменяем тексты найденного объекта:
function App() {
...
function doSmth(id) {
setNotes(notes.map(note => {
if (note.id === id) {
note.prop1 += '!';
note.prop2 += '!';
note.prop2 += '!';
return note;
}
return note;
}));
}
}
В конце каждой li сделайте кнопку,
по нажатию на которую эта li будет
удаляться из списка.
Даны три инпута. В конце каждой li
сделайте кнопку, по нажатию на которую
данные объекта этой li будут
попадать в соответствующие инпуты.
Модифицируйте предыдущую задачу так,
чтобы рядом с инпутами была кнопка,
по нажатию на которую данные инпутов
будут попадать в соответствующую li.