title: Why is my function not working- pop up image gallery
body: <p>I'm trying to make a standard effect, where clicking on an image in a gallery will enlarge the image, put it at the center of the screen (in front of everything else), and darken the background. I haven't set up the slideshow part yet (so it won't change images), but the aim is to create an index so that I can do that in the future. I'm following a tutorial and trying to adapt it to my backend, but I'm missing a beat. It's not registering which image has been clicked (and I'm getting two errors in the console- 404, and 500). I'm using Nextjs as my frontend, Sanity for my backend.</p>
  <pre><code>import React, { useState } from 'react';
  import { client, urlFor } from '../lib/client';
  import { Header, Footer, Modal } from '../components';
  
  const sets = ({setData, imagesData}) =&gt; {
    
    const [clickedImage, setClickedImage] = useState(null);
    const [currentIndex, setCurrentIndex] = useState(null);
  
    const handleClick = (imagesData, index) =&gt; {
      setCurrentIndex(index);
      setClickedImage(imagesData.image);
    };
  
    const handleRotationRight = () =&gt; {
      const totalLength = imagesData.imageItems.length;
      if(currentIndex + 1 &gt;= totalLength){
        setCurrentIndex(0);
        const newData = imagesData.imageItems[0];
        setClickedImage(newData);
        return;
      }
      const newIndex = currentIndex + 1;
      const newData = imagesData.imageItems.filter((image) =&gt; {
        return imagesData.imageItems.indexOf(image) === newIndex;
      });
      const newItem = newData[0].image;
      setClickedImage(newItem);
      setCurrentIndex(newIndex);
    };
  
    return ( 
      &lt;div&gt; 
        &lt;Header /&gt;
        &lt;main className=&quot;slug-gallery&quot;&gt; 
          &lt;div className=&quot;title&quot;&gt;
              &lt;div className=&quot;title-line-left&quot;&gt;&lt;/div&gt;
                &lt;h2&gt;{setData.set_name}&lt;/h2&gt;
              &lt;div className=&quot;title-line-right&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div className=&quot;images-container&quot;&gt;
              &lt;ul className=&quot;overall-images&quot;&gt;
              {imagesData.imageItems &amp;&amp; imagesData.imageItems.map((imagesData, index) =&gt; (
                &lt;li key={index}&gt;
                  &lt;img 
                    src={urlFor(imagesData.image).auto('format').url()}
                    className=&quot;the_image&quot;
                    alt='test a'
                    onClick={() =&gt; handleClick(imagesData, index)}
                  /&gt; 
                &lt;/li&gt;
              ))}
              &lt;/ul&gt;
          &lt;/div&gt;
          {clickedImage &amp;&amp; (
            &lt;Modal 
              clickedImage={clickedImage} 
              handleRotationRight={handleRotationRight}
              setClickedImage={setClickedImage}
            /&gt;
          )}
        &lt;/main&gt;
        &lt;Footer /&gt;
      &lt;/div&gt;
    )
  }
  
  export default sets
  
  export const getServerSideProps = async (pageContext) =&gt; {
    const setSlug = pageContext.query.slug;
  
    const setQuery = `*[_type == 'set' &amp;&amp; slug.current == $setSlug][0]`;
    const imagesQuery = `*[_type == 'set' &amp;&amp; slug.current == $setSlug][0]{'imageItems':set_images[]{image{
      asset-&gt;{_id, url}, alt, name, date, size, materials}}}`;
  
    const setData = await client.fetch(setQuery, {setSlug});
    const imagesData = await client.fetch(imagesQuery, {setSlug});
  
    return {
      props: {setData, imagesData}
    }
  }
  </code></pre>
  <p>Heres the Modal component:</p>
  <pre><code>import React from 'react'
  
  const Modal = ({clickedImage, handleRotationRight, setClickedImage}) =&gt; {
      
      const handleClick = (e) =&gt; {
          if(e.target.classList.contains(&quot;dismiss&quot;)){
              setClickedImage(null);
          }
      }
      
      return(
          &lt;&gt;
          &lt;div className=&quot;overlay dismiss&quot; onClick={handleClick}&gt;
              &lt;img src={clickedImage} alt='test b'/&gt;
              &lt;span className=&quot;dismiss&quot; onClick={handleClick}&gt;x&lt;/span&gt;
          &lt;/div&gt;
          &lt;div onClick={handleRotationRight} className=&quot;overlay-arrows_left&quot;&gt;
              &lt;img src=&quot;/next_portfolio/public/images/cart.png&quot; alt='test c'/&gt;
          &lt;/div&gt;
          &lt;/&gt;
      )
  };
  
  export default Modal;
  </code></pre>