title: react JS render a component after a click
body: <p>I'm using React and when a user clicks on the <code>&lt;li&gt;</code> tag, the popup method is fired, but the component inside the method is not shown, the popup component does not get fired, why is that?</p>
  
  <pre><code>  export default class Main extends React.Component {
    constructor(props) {
      super(props);
    }
    popup(value) {
      console.log('fired ok');
      //call popup component
      &lt;Popup value={value} /&gt;
    }
    render() {
      return (
        &lt;ul&gt;
          &lt;li key={0} onClick={() =&gt; this.popup(value)} /&gt;
        &lt;/ul&gt;
      )
    }
  }
  
  export default class Popup extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      console.log('this is not fired');
      const { value } = this.props;
  
      return (
        &lt;div class="popup"&gt;
          &lt;p&gt;{value}&lt;/p&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>