I currently have multiple divs displaying various details. My initial plan was to fetch the details from the backend and bind them to my HTML section, but for now, I have hardcoded the details. Here is a snippet of my HTML code:
<div className="trait_box polaroid" onClick={this.trait_select}>
<div className="main_trait_card" style={{transform: this.state.rotated ? 'rotateY(180deg)' : 'none' }}>
<div className="front_card_rotate">
<div className="trait_description_div">
<span className="trait_description">Honesty</span>
</div>
<div className="trait_img_div">
<img src={Honesty} className="trait_img"/>
</div>
<div className="block__body">
<img src={Add} className="trait_add"/>
<p className="trait_text">Honesty refers to a facet of moral character and connotes positive and virtuous attributes such as integrity, truthfulness, straightforwardness, etc.. </p>
</div>
</div>
<div className="back_card_rotate front_card_rotate">
<span>Wolverine</span>
</div>
</div>
</div>
This particular div will be repeated based on how many items are stored in the backend.
For rotating these divs upon click, here's my approach:
constructor() {
super();
this.state = {rotated: false};
this.trait_select = this.trait_select.bind(this);
}
trait_select = (e) => {
this.setState({rotated: !this.state.rotated});
}
My issue lies in the fact that with repeated CSS classes, every item rotates when clicked because they all share the same classes. How might I differentiate the clicked item from others?