title: What is this error and why isn't null the right choice?
body: <p>The error I keep receiving when I use null, per the tutorial I'm following for a modal set up in React (using VSC) gives me this:</p>
  <pre><code>TypeError: setSelectedImage is not a function
  handleClick
  src/components/modal.js:8
     5 | const handleClick = (e) =&gt; {
     6 |     if(e.target.classList.contains('backdrop'))
     7 |     {
  &gt;  8 |         setSelectedImage(null);
       | ^   9 |     }
    10 |     
    11 |     
  </code></pre>
  <p>My Modal.js file is:</p>
  <pre><code>import React from 'react';
  
  const Modal = ({ selectedImage , setSelectedImage}) =&gt; {
  
      const handleClick = (e) =&gt; {
          if(e.target.classList.contains('backdrop'))
          {
              setSelectedImage(null);
          }
          
          
      };
  
      return (
          &lt;div className=&quot;backdrop&quot; onClick={handleClick}&gt;
              &lt;img src={selectedImage} alt=&quot;enlarged pic&quot; /&gt;
          &lt;/div&gt;
      )
  }
  
  export default Modal;
  </code></pre>
  <p>Where its being used:</p>
  <pre><code>import GridGallery from &quot;./components/grid-gallery&quot;;
  import React, {useState} from 'react';
  import Modal from './components/modal';
  import './components/modal.css';
  import &quot;./index.css&quot;;
  
  export default function Gallery()
  {
      const [selectedImage, setSelectedImage] = useState(null);
      const images = 
      [
          '../images/SplashPgConc.png',
          &quot;../images/Wolf.png&quot;,
          &quot;../images/SplashPgConc.png&quot;,
          &quot;../images/Wolf.png&quot;,
          &quot;../images/SplashPgConc.png&quot;,
          &quot;../images/Wolf.png&quot;,
          &quot;../images/SplashPgConc.png&quot;,
          &quot;../images/Wolf.png&quot;,
          &quot;../images/SplashPgConc.png&quot;,
          &quot;../images/Wolf.png&quot;,
          &quot;../images/SplashPgConc.png&quot;,
          &quot;../images/Wolf.png&quot;
      ];
      return (
          &lt;div className=&quot;items-center&quot;&gt;
              &lt;GridGallery images={images} setSelectedImage={setSelectedImage} /&gt;
               {selectedImage &amp;&amp; &lt;Modal selectedImage={selectedImage} setSelectedImage={setSelectedImage}/&gt; }
          &lt;/div&gt;
  
      );
  }
  </code></pre>
  <p>And Grid Gallery for more context:</p>
  <pre><code>import { useState } from &quot;react&quot;;
  import VisibilitySensor from 'react-visibility-sensor';
  
  
  export default function GridGallery({images ,setSelectedImage}){
      const [imagesShownArray, setImagesShownArray] = useState(
          Array(images.length).fill(false)
      );
  
      const imageVisibleChange = (index, isVisible) =&gt; {
          if(isVisible){
              setImagesShownArray((currentImagesShownArray) =&gt;{
                  currentImagesShownArray[index] = true;
                  return [...currentImagesShownArray];
              });
          }
      };
  
  
      return(
          &lt;div className= &quot;grid grid-cols-3 gap-2&quot;&gt;
              {images &amp;&amp; images.map((imageUrl, index)=&gt; (
                  &lt;VisibilitySensor
                  key={index}
                  partialVisibility={true}
                  offset={{ bottom: 80 }}
                  onChange={(isVisible) =&gt; imageVisibleChange(index, isVisible)}
                &gt;
                  &lt;GridGalleryCard
                    imageUrl={imageUrl}
                    show={imagesShownArray[index]}
                    setSelectedImage={setSelectedImage}
                  /&gt;
                &lt;/VisibilitySensor&gt;
              ))}
          &lt;/div&gt;
      );
  
  };
          
  function GridGalleryCard({ imageUrl , show , setSelectedImage}) 
  {
      return (
                  &lt;div className={`relative transition ease-in duration-300 transform ${
                      show ? &quot;&quot; : &quot;translate-y-16 opacity-0&quot;
                  }`} onClick={() =&gt; setSelectedImage(imageUrl)}&gt;
  
                      &lt;div className=&quot;absolute inset-0 z-10 flex transition duration-200 ease-in hover:opacity-0&quot;&gt;
                          &lt;div className=&quot;absolute inset-0 bg-black opacity-70&quot;&gt;&lt;/div&gt;
                          &lt;div className=&quot;mx-auto text-white z-10 self-center uppercase tracking-widest text-sm&quot;&gt;
                              Hello World
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;img src ={imageUrl} /&gt;
                  &lt;/div&gt;
         
      );
  }
  </code></pre>
  <p>I am super confused why using <code>null</code> with the <code>setSelectedImage</code>throws an error, would anyone be able to clarify this and what I am doing wrong? It all works just right up until I click off the picture, then it throws the error instead of closing the modal. I'm really proud of myself for actually making it this far.</p>