title: How to render a component multiple times dynamically
body: <pre><code>import React, { useState } from "react";
  import "./styles.css";
  
  export default function App() {
    const [name, setName] = useState('')
    return (
      &lt;div&gt;
        {
          ['heni', 'mezi', 'dave'].map(name =&gt; {
            return &lt;button onClick={() =&gt; setName(name)}&gt;{name}&lt;/button&gt;
          })
        }
        {name &amp;&amp; &lt;NewWindowDisplayer&gt;&lt;h1&gt;{name}&lt;/h1&gt;&lt;/NewWindowDisplayer&gt;}
      &lt;/div&gt;
    );
  }
  
  
  // mock implementation.
  // Actually this component displays its children
  // in a new window using ReactDOM.createPortal API.
  function NewWindowDisplayer (props) {
    return &lt;div&gt;{props.children}&lt;/div&gt;
  }
  </code></pre>
  
  <p>Whenever a new button is clicked, I want to create a new <code>NewWindowDisplayer</code> component, so that each users data will be displayed in a different window. If there is an open window for the name, I want to use that instead of creating a duplicate. Like for above example there will be a maximum 3 new windows for each names. But this implementation will create one <code>NewWindowDisplayer</code> and update it when its props changed.</p>
  
  <p>In short my question is how to render a component multiple times dynamically, button click for this case. Though I can track the clicked items and render the component based on it(array of clicked items and then traverse to the array and render the component), <code>NewWindowDisplayer</code> is a bit complex and I don't want to render it every time when a new button is clicked.</p>
  
  <p>Is there any other way to accomplish this?</p>
  
  <p><a href="https://codesandbox.io/s/gallant-sunset-li0co?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/gallant-sunset-li0co?file=/src/App.js</a></p>