Fragman, вот тебе работающий тестовый пример...
import React from 'react';
import ReactDOM from 'react-dom';
//import './index.css';
const arr = [
{ id: '1', header: 'Первая карточка', checked: false },
{ id: '2', header: 'Вторая карточка', checked: false },
{ id: '3', header: 'Третья карточка', checked: false },
{ id: '4', header: 'Четвертая карточка', checked: false },
{ id: '5', header: 'Пятая карточка', checked: false },
]
const Img = props => {
const stl = props.checked ? {textDecoration: 'line-through'} : {}
return (
<li style={stl} onClick={() => props.mark(props.id)}>{props.header}</li>
)
}
class List extends React.Component {
constructor(props) {
super(props);
this.state = {
arr
};
this.mark = this.mark.bind(this)
this.del = this.del.bind(this)
}
mark(id) {
const i = this.state.arr.findIndex(el => el.id ===id)
this.setState(old => {
old.arr[i].checked = !old.arr[i].checked
return old
})
}
del() {
this.setState(old => {
old.arr = old.arr.filter(el => !el.checked)
return old
})
}
render() {
return (
<div>
<ul>
{this.state.arr.map(el => {
return <Img key={el.id} {...el} mark={this.mark} />
})}
</ul>
<button onClick={this.del}>Удалить</button>
</div>
)
}
}
ReactDOM.render(
<List />,
document.getElementById('root')
);