title: How to render only one component after changing its state?
body: <p>How can I display only one <code>&lt;CardDetails /&gt;</code> component, whose parent was clicked? When I run my code, after changing the state all my CardDetails components render. Is there another way instead of adding unique onclick event and state for every component? </p>
  
  <pre><code>class Deck extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          cardDetails: false
        };
        // This binding is necessary to make `this` work in the callback
        this.handleClick = this.handleClick.bind(this);
        this.onClick = this.onClick.bind(this);
      }
      onClick() {
        this.setState({
          cardDetails: true,
          // when cardDetails is set as true, all &lt;CardDetails /&gt; components are rendered
        }, function() {
          console.log('cardDetails: ' + this.state.cardDetails + '. This.onclick: ' + this.onClick)
        });
      }
      render() {
          return ( &lt; div className = "deck-container" &gt; &lt; div className = "chosen-cards" &gt; 
          &lt;CardHistory onClick = {
                this.onClick
              } &gt; {
                this.state.cardDetails ? &lt; CardDetails / &gt; : null
              } &lt; /CardHistory&gt; 
              &lt; CardHistory onClick = {this.onClick} &gt; {
                this.state.cardDetails ? &lt; CardDetails / &gt; : null
              } &lt; /CardHistory&gt; &lt;/div &gt; &lt; /div&gt; );}}
              ReactDOM.render( &lt; Deck &gt; &lt; /Deck&gt;,document.getElementById('root'));
  </code></pre>