title: Cannot pass object data to modal
body: <p>having an issue with passing object data to modal, the modal and cards show up fine with correct data, but once I click the card the model does not display its corresponding data, they each have there own object data as so:</p>
  <pre><code>export const projectObjOne = {
  id: &quot;projects&quot;,
  
  topLine: &quot;Project 1&quot;,
  headline: &quot;React, JS, Node&quot;,
  description: &quot;&quot;,
  
  img: &quot;/images/Aucklandbanner.png&quot;,
  alt: &quot;project-one&quot;,
  
  buttonLabel: &quot;Button 1&quot;,
  buttonLabelTwo: &quot;Button 2&quot;,
  };
  
  export const projectObjTwo = {
  id: &quot;projects&quot;,
  
  topLine: &quot;Project 2&quot;,
  headline: &quot;React, JS, Node&quot;,
  description: &quot;&quot;,
  
  img: &quot;/images/Aucklandbanner.png&quot;,
  alt: &quot;project-one&quot;,
  
  buttonLabel: &quot;Button 1&quot;,
  buttonLabelTwo: &quot;Button 2&quot;,
  };
  </code></pre>
  <p>Now here is my index with the cards and modal hook:</p>
  <pre><code>const Projects = ({}) =&gt; {
    const [showModal, setShowModal] = useState(false);
  
    // const [modalInfo, setModalInfo] = usestate([]),
  
    const openModal = () =&gt; {
      setShowModal(!showModal);
  
      console.log(&quot;clicked&quot;);
    };
  
    const projectData = {};
  
    return (
      &lt;&gt;
        &lt;ProjectsContainer id=&quot;projects&quot;&gt;
          &lt;ProjectsWrapper&gt;
            &lt;div onClick={openModal}&gt;
              &lt;ProjectCard {...projectObjOne} /&gt;
              &lt;ProjectModal
                showModal={showModal}
                setShowModal={setShowModal}
                {...projectObjOne}
              /&gt;
            &lt;/div&gt;
  
            &lt;div onClick={openModal}&gt;
              &lt;ProjectCard {...projectObjTwo} /&gt;
              &lt;ProjectModal
                showModal={showModal}
                setShowModal={setShowModal}
                {...projectObjTwo}
              /&gt;
            &lt;/div&gt;
  
            &lt;div onClick={openModal}&gt;
              &lt;ProjectCard {...projectObjThree} /&gt;
              &lt;ProjectModal
                showModal={showModal}
                setShowModal={setShowModal}
                {...projectObjTwo}
              /&gt;
            &lt;/div&gt;
          &lt;/ProjectsWrapper&gt;
        &lt;/ProjectsContainer&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>So when I click the card only the spread operator for the first objects data shows, any of the others won't show its corresponding data as it should.</p>
  <p>Cheers</p>