Create separate state for similar react children object in an array - reactjs

Question

I have created a small social media app where there is a like button to like the post. When I press like on first button, second post's like changes color too which is state based.
Here is the code:
Likes.js
<LikedPanel
posts_id={posts_id}
person_id={person_id}
toggleLikePost={this.toggleLikePost}
liked={this.state.liked}
/>
const LikedPanel = ({posts_id, person_id, liked, toggleLikePost}) => (
<Panel onClick={() => toggleLikePost(posts_id, person_id)}>
{liked
?
<Fragment>
<LikeIcon nativeColor={indigo[500]}/>
<LikedText>Like</LikedText>
</Fragment>
:
<Fragment>
<LikeIcon/>
<LikeText>Like</LikeText>
</Fragment>
}
</Panel>
);
toggleLikePost = (posts_id, person_id) => {
// make api call and then setState
this.setState(liked: res.data.liked);
};
Update
Posts.js
const Posts = ({ feed, deletePost }) => (
<Card style={{ margin: '25px 0'}} square>
<ContentMedia post={feed.post} deletePost={deletePost} />
<Like liked={feed.post.likes.length > 0} posts_id={feed.post.id} person_id={feed.post.person_id} />
<Comments post_id={feed.post.id} comments={feed.post.comments} />
</Card>
);
Newsfeed.js
<div style={{ maxWidth: '500px', margin: '0 auto', paddingTop: '20px'}}>
{this.renderPosts(this.state.feed)}
</div>
renderPosts = (feeds) =>
feeds.map(feed => <Posts key={feed.post.id} feed={feed} deletePost={this.deletePost} />);
It loads fine when I refresh. But when I click like on any one post, all the other like icon gets toggled and vice versa. I see that it uses the same state for all elements. Is there a way to tell react to have its own self-contained state for every post's like panel?

Answer 1

Instead of storing a boolean value liked that it used by all the like buttons to determine if they should be toggled you can store an array of the liked posts. Then you can add liked post id to that array and detect in your LikedPanel if the current post id is in the liked array.
<LikedPanel
posts_id={posts_id}
person_id={person_id}
toggleLikePost={this.toggleLikePost}
liked={this.state.liked.indexOf(posts_id) !== -1 }
/>
toggleLikePost = (posts_id, person_id) => {
// make api call and then setState
this.setState(prevState => {
// add post id to liked array only if it's not added yet
if (prevState.liked.indexOf(posts_id) === -1) {
return {liked: [...prevState.liked, posts_id]};
}
});
};