I am learning React. I am having a problem. I can't make Not Done a Done. I would like to beg for help. If not difficult, I would like an example of how to implement this. If I have errors, sorry. I am bad in English.
class ToDoList extends React.Component {
constructor(props) {
super(props)
this.state = {
completed: true
}
this.handleClick = this.handleClick.bind(this);
}
render () {
const { items} = this.props
return (
<table>
{items.map(item => (
<tr className="hr">
<td className="col1">{item.id}</td>
<td className="col2">{item.text}</td>
<td className="col3">{item.date}</td>
<td className="col4">{this.state.сompleted ? 'Done' : 'Not Done'}</td>
<td className="col5"><button onClick ={ this.handleClick }className="btn btn-xs btn-success img-circle">✓</button></td>
</tr>
))}
</table>
)
}
handleClick() {
console.log('---', 'completed')
// this.setState({
// completed: !this.state.completed
// })
if (this.state.completed = true) {
this.state.completed = false
}
}
}