I have a scenario where I am rendering 4 divs based on data fetched from my backend. Each div is colored according to a state change. While I have successfully implemented this, the issue is that all 4 divs can be colored in this way simultaneously. I want to ensure that only one div is colored at a time - when I color a new div, the previous one should revert back to its original color. How can I achieve this functionality?
Here is a snippet of my code:
textVote() {
this.setState({
vote_status: !this.state.vote_status
})
}
handleClick(id) {
let vote_object = {
voting_object: id,
post_id: this.props.postId
}
this.props.submitvote(vote_object)
this.textVote();
}
render() {
console.log("getVoteStatus", this.props.getVoteStatus)
let {contents, submitvote, postId} = this.props
return (
<div className="txt_vote_bar_div" style={{backgroundColor: this.state.vote_status ? '#0b97c4' : 'white'}}>
<p className="txt_vote_choice" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}}
id={contents.post_poll_content_id} onClick={() => {
this.handleClick(contents.post_poll_content_id);
}}> {contents.content} </p>
<p className="txt_tot_votes" style={{color: this.state.vote_status ? '#FFFFFF' : '#6a6a6a'}}> 56% (Votes: {contents.votes}) </p>
</div>
);
};
Is there a way for me to ensure that only one div background is colored at a time and remove the background color when another div is selected? Thank you.