title: Creating Multiple Modals from inside a Loop that can be toggled on & off individually
body: <p>I'm looping through an array, displaying items. When the user clicks on one of the items, I want a modal to open up, with more specific data on that item. It turns out I am finding this surprisingly difficult. <strong>You can look at both my approaches or skip them. I just included them to show what I've tried.</strong> Basically, what I am trying to do is have a modal correspond to each item in the array and hold the corresponding data.</p>
  
  <h1><strong>First Approach (failed)</strong></h1>
  
  <p>Initially, I tried this:  </p>
  
  <pre><code>        const [isModalOpen, setModalOpen] = useState(false);
  
          data.articles.map((article, i) =&gt; {
            return (
              &lt;div
                key={article.id}
              &gt;
                &lt;button
                  onClick={() =&gt; {
                    setModalOpen(true);
                  }}
                &gt;
                  Let's go
                &lt;/button&gt;
                }
              &lt;/div&gt;
            {isModalOpen &amp;&amp; &lt;Modal&gt; {article.author.lastName} &lt;/Modal&gt;
            );
  </code></pre>
  
  <p>With the code for Modal being:</p>
  
  <pre><code>const Modal = ({ children, isOpen, ..props }) =&gt; {
  
    return (
      &lt;ModalWrapper isOpen={isOpen} {...props}&gt;
        {children}
      &lt;/ModalWrapper&gt;
    );
  };
  
  export default Modal;
  </code></pre>
  
  <p>This doesn't work, since the state will be toggled for <strong>all</strong> Modals in the loop, so they will all open at once, with the effect being that it looks like just the last item in my list is open (since they're all overlapping).</p>
  
  <h1><strong>Second Approach (failed)</strong></h1>
  
  <p>Then I tried this:</p>
  
  <pre><code>        data.articles.map((article, i) =&gt; {
            return (
              &lt;div
                key={article.id}
              &gt;
                &lt;button
                  onClick={() =&gt; {
                    openModal(article);
                  }}
                &gt;
                  Let's go
                &lt;/button&gt;
                }
              &lt;/div&gt;
            );
  </code></pre>
  
  <p>and here I try to open the modal:</p>
  
  <pre><code>  const openModal = (article) =&gt; {
      alert(article.author.name);
      return (
        &lt;div
          style={{
            position: "absolute",
            width: "500px",
            height: "500px",
            zIndex: "5",
            backgroundColor: "red",
          }}
        &gt;
          Hello from Modal
        &lt;/div&gt;
      );
    };
  </code></pre>
  
  <p>The <code>alert()</code> here works, but the Modal is not being shown, I guess it's not hooked up properly in the React/JSX hierarchy? </p>
  
  <h1>Question:</h1>
  
  <p>How am i thinking about this the wrong way? Help would really be appreciated.</p>