Здравствуйте. Подскажите, пожалуйста, как правильно реализовать следующe логику:
import React from 'react'
class App extends React.Component {
constructor(props) {
super(props);
this.list = [];
this.items = [
{ id: 1, value: 'item 1' },
{ id: 2, value: 'item 2' },
{ id: 3, value: 'item 3' },
{ id: 4, value: 'item 4' },
{ id: 5, value: 'item 5' },
{ id: 6, value: 'item 6' },
{ id: 7, value: 'item 7' },
{ id: 8, value: 'item 8' }
];
}
setDataLocalStorage = (item) => {
this.list.push(item.id);
console.log(this.list);
}
render() {
return (
<React.Fragment>
{
this.items.map((item, index) => {
return (
<ul
className=""
key={index}
>
<li
onClick={() => this.setDataLocalStorage(item)}
>
{ item.value }
</li>
</ul>
);
})
}
</React.Fragment>
)
}
}
export default App;
В данный момент при click на элемент, я записываю значения в массив.
Мне необходимо при повтрном click на элемент, удалять его из масса (если он там есть). Также по тому же принципу добавлять/удалять class на элементе. Т.е. я click на элемент - добавился класс на элементе и записалось значение в массив, и также другие элементы. Если я click, и id этого элемента уже есть в массиве, удаляю с него класс и его id с массива.