title: Load a react component on button onClick
body: <p>I have the following code for a button in my ReactApp to open a new window with specific size:</p>
  <pre><code>&lt;button
     type=&quot;button&quot;
     style={{ height: '20px', width: '50px' }}
     className=&quot;btn btn-primary&quot;
     onClick={() =&gt; {
     window.open(
     &quot;&quot;,
     &quot;Popup&quot;,
     &quot;width=975, height=92, top=30&quot;
         );
       }}
   /&gt;
  </code></pre>
  <p>I want to load another component when user clicks on the button. How can I achieve that? I have tried to load the component and then use it like the following, but didn't work:</p>
  <pre><code>import component from &quot;./component&quot;
  
      &lt;button
         type=&quot;button&quot;
         style={{ height: '20px', width: '50px' }}
         className=&quot;btn btn-primary&quot;
         onClick={() =&gt; {
         window.open(
         &quot;{&lt;component /&gt;}&quot;,
         &quot;Popup&quot;,
         &quot;width=975, height=92, top=30&quot;
             );
           }}
       /&gt;
  </code></pre>
  <p>What would be the best way to do this?</p>
  <p>Here is my component:</p>
  <pre><code>export default function component(props) {
    return (
    
      &lt;div className=&quot;container&quot;&gt;
        &lt;div className=&quot;cabinet&quot;&gt;&lt;img src={image} /&gt;
          &lt;div className=&quot;devices&quot;&gt; &lt;img src={image2} /&gt;
         
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>