Q:

State affecting all elements with same name

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>
        );
    }
}

A:

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>

