I am a new to React and trying to make a toDoApp. I'm trying to create an onClick event to remove an element from the tasks state. But it does not seem to work. And can I also ask how to implement id keys so that I can remove the desired task that I want?
import React from 'react';
import './App.css';
class App extends React.Component {
constructor(){
super();
this.state = {
value: '',
tasks: []
};
this.handleChange = this.handleChange.bind(this)
this.addItem = this.addItem.bind(this)
this.removeItem = this.removeItem(this)
}
handleChange(event) {
this.setState({
value: event.target.value
})
}
addItem(){
if(this.state.value === ''){
alert('Enter a task!')
} else {
const newTask = [...this.state.tasks, this.state.value]
this.setState({
tasks: newTask,
value: ''
})
}
}
removeItem(){
this.state.tasks.pop()
this.setState({
tasks: this.state.tasks,
})
}
render(){
const itemList = this.state.tasks.map((num) =>
<li>{num}</li>
);
return(
<div>
<input type="text" value={this.state.value} onChange={this.handleChange}></input>
<button onClick={this.addItem}>+</button>
<button onClick={this.removeItem}>-</button>
<ul>{itemList}</ul>
{this.state.tasks}
</div>
)
}
}
export default App;strong text
pop() removes the last element, but React will not rerender the component as setState is called with the same array. You can create a new array and use it for updating the state.
removeItem() {
this.state.tasks.pop()
this.setState({
tasks: [...this.state.tasks],
})
}