https://i.sstatic.net/IlXwE.gif
Encountering an issue similar to the gif image provided. Upon deleting the first card, the content of the subsequent card is also removed. How can this be prevented?
state = {
data: '',
todoCard: [],
id: 0,
}
addCard() {
this.setState({ id: this.state.id + 1, todoCard: [...this.state.todoCard, this.state.id] })
}
deleteCard(id) {
this.setState({
todoCard: this.state.todoCard.filter(item => item !== id)
});
}
The addition and deletion of the div card are managed through these functions.
<div className="pageContainer">
<CreateCard onClick={this.addCard.bind(this)} />
{this.state.todoCard.map((e, i) => (
<TodoCard deleteCard={() => this.deleteCard(e)}
key={i}
value={e} />
))}
</div>
Creation of the added cards follows this format.
class TodoCard extends Component {
state = {
newItem: "",
list: []
}
handleChange(event) {
this.setState({ newItem: event.target.value })
}
addItem(event) {
event.preventDefault();
const newItem = {
id: 1 + Math.random(),
value: this.state.newItem.slice(),
checked: false
};
//Validation with if-else statement for input
if (newItem.value === "") {
alert("Cannot enter blank information")
}
else {
const list = [...this.state.list];
list.push(newItem);
this.setState({
list,
newItem: ""
})
}
}
deleteItem(id) {
const list = [...this.state.list];
const updatedList = list.filter(item => item.id !== id);
this.setState({ list: updatedList });
}
checkItem(id) {
this.setState({
list: this.state.list.map(item => {
if (item.id === id) {
return {
...item,
checked: !item.checked
}
}
else {
return item;
}
})
})
}
render() {
return (
<div className="card">
<TodoForm onChange={this.handleChange.bind(this)} value={this.state.newItem} submit={this.addItem.bind(this)} />
<hr />
<button onClick={this.props.deleteCard}>Delete</button>
<p>{this.props.value}</p>
<ul>
{this.state.list.map(item => {
return (
<li className="list" key={item.id}>
<input onClick={() => this.checkItem(item.id)} className="checkbox" type="checkbox" />
<label style={{ textDecoration: item.checked ? "line-through" : "" }}>{item.value}</label>
<button className="deleteButton" onClick={() => this.deleteItem(item.id)}>X</button>
</li>
)
})}
</ul>
</div>
)
}
}
The content of the card behaves as expected when deleting the last card, but issues arise when deleting the first card, resulting in the removal of the next card's content.