title: Best way of rendering a component with onClick (react)?
body: <p><strong>What I'm trying to do</strong>: when a user clicks a button, a new component is rendered (that component houses an image). </p>
  
  <p><strong>The problem</strong>: The way I have it setup, when a user clicks, the handleClick function sets flips the state to true, which in turn loads the component. However, this only works once. I'd like it keep creating new components, rather than to flip a switch, but I'm a relatively new coder and I can't quite figure out how to go about this.</p>
  
  <p>Would appreciate the help on this :)</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Card from './card.js';
  
  class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
          clicked: false
        };
     this.handleClick = this.handleClick.bind(this);
  
      }
  
      handleClick() {
     this.setState({
       clicked: true
     });
   }
  
  
    render() {
      return (
        &lt;div className="App"&gt;
        &lt;h3 className="header"&gt;Random.&lt;/h3&gt;
  
  
  &lt;div className="hi"&gt;
        &lt;button onClick={this.handleClick}&gt;Hit Me.&lt;/button&gt;
  &lt;/div&gt;
        {this.state.clicked ? &lt;Card /&gt; : null}
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>