To Do List: Delete Button Removes Info from Wrong List Item - reactjs

Question

I am creating a basic React application which is essentially a to do list. The user can enter text and add an item to the list, which is an array that is rendered with the map method. Each item can be upvoted, downvoted, or deleted. The input text, number of upvotes, and number of downvotes are displayed on each item.
Here's the problem: When I click the delete button on an item, the input text from that item is deleted, but not the upvotes or downvotes. The upvotes and downvotes are always removed from the last item in the array. So when the list is re-rendered, the votes become all mixed up.
I've included the code from both my parent component (Category) and child component (Item). Sorry if it's a lot of code but I've had trouble pinpointing the source of the problem.
class Category extends Component {
state = {
inputValue: '',
items: this.props.items,
};
handleSubmit = e => {
e.preventDefault();
this.setState({ items: this.state.items.concat(this.state.inputValue) })
this.setState({ inputValue: "" })
}
updateInputValue(evt) {
this.setState({
inputValue: evt.target.value
});
}
handleDelete = index => {
const newItems = this.state.items.filter((item, i) => {
return index !== i;
});
return this.setState({ items: newItems });
}
render() {
return (
<div className="category">
<h2>{this.props.name}</h2>
<form onSubmit={this.handleSubmit}>
<input value={this.state.inputValue} onChange={e => this.updateInputValue(e)}/>
<button type="submit">Submit</button>
</form>
{/* Enter all items: */}
{this.state.items.length > 0 ?
this.state.items.map((item, index) => {
const key = index;
return <Item
key={key}
text={item}
handleDelete={this.handleDelete.bind(this, index)}
/>
}) : <p>There are no items here.</p>
}
</div>
)
}
}
class Item extends Component {
state = {
likes: 0,
dislikes: 0
}
handleUpvote = () => {
return this.setState({ likes: this.state.likes + 1 });
}
handleDownvote = () => {
return this.setState({ dislikes: this.state.dislikes + 1 });
}
render() {
return (
<div className="item">
<div className="move-item">
<FontAwesomeIcon icon="chevron-left" />
</div>
<div className="item-content">
<div className="item-text">
<p>{this.props.text}</p>
</div>
<div className="item-actions">
<div className="item-action-icon">
<button onClick={this.handleUpvote}>
<FontAwesomeIcon icon="thumbs-up" />
</button>
<span> {this.state.likes}</span>
</div>
<div className="item-action-icon">
<button onClick={this.handleDownvote}>
<FontAwesomeIcon icon="thumbs-down" />
</button>
<span> {this.state.dislikes}</span>
</div>
<div className="item-action-icon">
<button onClick={this.props.handleDelete}>
<FontAwesomeIcon icon="trash-alt" />
</button>
</div>
</div>
</div>
<div className="move-item">
<FontAwesomeIcon icon="chevron-right" />
</div>
</div>
)
}
}

Answer 1

You need to lift up your state of likes/dislikes to be associated with each item. Otherwise, each one will be associated by position (AKA index), and once you remove one item, the index that dissapears is the last one, causing you to mess up the votes
your parent state would be like
items: this.props.items.map(item => ({ item, likes: 0, dislikes. 0 });
handleUpvote and handleDownvote should be on your Category component, and passed by props to your Item, which will call them passing the item.
That way you can update your likes/dislikes