State affecting all elements with same name - reactjs

Question

I'm trying to change the class of an element using the onClick event handler. When the div is clicked the class changes causing some css to change in turn. When I add another div, it assumes the same state as the first div.
class Content extends React.Component {
constructor(props) {
super(props);
this.startGambling = this.startGambling.bind(this);
this.toggleClass = this.toggleClass.bind(this);
this.state = {
prize: '',
tries: 0,
isFlipped: false
};
}
toggleClass() {
this.setState({ isFlipped: true });
};
render() {
return (
<div className="card-box" style={divStyle}>
<div class="flip-card-inner" className={this.state.isFlipped ? 'flipped' : null} onClick={this.toggleClass}></div>
</div>
);
}
}

Answer 1

State is not html-element-scoped. It is the state of the current Component.
Implement the FlipCard component and handle its flipped state within that component.
class FlipCard extends React.Component {
state = {
isFlipped: false
}
toggle = () => {
this.setState(prevState => ({
isFlipped: !prevState.isFlipped
}))
}
render(){
const { isFlipped } = this.state;
return (
<div
onClick={this.toggle}
className={isFlipped ? 'flipped' : ''}>
Card
</div>
)
}
}
const CardBox = () => (
<article>
<FlipCard />
<FlipCard />
</article>
);
ReactDOM.render(<CardBox />, document.getElementById('root'))
div {
cursor: pointer;
}
div.flipped {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

This is a different approach than #gazdagergo's answer but logic is the same. You need to track toggled state somewhere. If you don't need this toggled state anywhere else, you can keep it in its own components as #gazdagergo showed. But, for example, if you need to know how many items are toggled (just an example) you can keep the state in the parent component to share this info with another component.
const cards = [
{ id: 1, name: "foo" },
{ id: 2, name: "bar" },
{ id: 3, name: "baz" }
];
const Card = ({ card, toggleClass, isFlipped }) => {
const handleClick = () => toggleClass(card.id);
return (
<div onClick={handleClick} className={isFlipped[card.id] ? "flipped" : ""}>
{card.name}
</div>
);
};
class Content extends React.Component {
constructor(props) {
super(props);
this.toggleClass = this.toggleClass.bind(this);
this.state = {
prize: "",
tries: 0,
isFlipped: {}
};
}
toggleClass(id) {
this.setState(state => ({
isFlipped: { ...state.isFlipped, [id]: !state.isFlipped[id] }
}));
}
render() {
return (
<div>
{cards.map(card => (
<Card
key={card.id}
card={card}
toggleClass={this.toggleClass}
isFlipped={this.state.isFlipped}
/>
))}
</div>
);
}
}
ReactDOM.render(<Content />, document.getElementById("root"));
.flipped {
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />
In the example, I assumed that card items have a unique id but you can do that with indexes also. Your isFlipped state is not a boolean anymore, it is an object and keeps the flipped ids.