0

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:

TypeError: setSelectedImage is not a function
handleClick
src/components/modal.js:8
   5 | const handleClick = (e) => {
   6 |     if(e.target.classList.contains('backdrop'))
   7 |     {
>  8 |         setSelectedImage(null);
     | ^   9 |     }
  10 |     
  11 |     

My Modal.js file is:

import React from 'react';

const Modal = ({ selectedImage , setSelectedImage}) => {

    const handleClick = (e) => {
        if(e.target.classList.contains('backdrop'))
        {
            setSelectedImage(null);
        }
        
        
    };

    return (
        <div className="backdrop" onClick={handleClick}>
            <img src={selectedImage} alt="enlarged pic" />
        </div>
    )
}

export default Modal;

Where its being used:

import GridGallery from "./components/grid-gallery";
import React, {useState} from 'react';
import Modal from './components/modal';
import './components/modal.css';
import "./index.css";

export default function Gallery()
{
    const [selectedImage, setSelectedImage] = useState(null);
    const images = 
    [
        '../images/SplashPgConc.png',
        "../images/Wolf.png",
        "../images/SplashPgConc.png",
        "../images/Wolf.png",
        "../images/SplashPgConc.png",
        "../images/Wolf.png",
        "../images/SplashPgConc.png",
        "../images/Wolf.png",
        "../images/SplashPgConc.png",
        "../images/Wolf.png",
        "../images/SplashPgConc.png",
        "../images/Wolf.png"
    ];
    return (
        <div className="items-center">
            <GridGallery images={images} setSelectedImage={setSelectedImage} />
             {selectedImage && <Modal selectedImage={selectedImage} setSelectedImage={setSelectedImage}/> }
        </div>

    );
}

And Grid Gallery for more context:

import { useState } from "react";
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) => {
        if(isVisible){
            setImagesShownArray((currentImagesShownArray) =>{
                currentImagesShownArray[index] = true;
                return [...currentImagesShownArray];
            });
        }
    };


    return(
        <div className= "grid grid-cols-3 gap-2">
            {images && images.map((imageUrl, index)=> (
                <VisibilitySensor
                key={index}
                partialVisibility={true}
                offset={{ bottom: 80 }}
                onChange={(isVisible) => imageVisibleChange(index, isVisible)}
              >
                <GridGalleryCard
                  imageUrl={imageUrl}
                  show={imagesShownArray[index]}
                  setSelectedImage={setSelectedImage}
                />
              </VisibilitySensor>
            ))}
        </div>
    );

};
        
function GridGalleryCard({ imageUrl , show , setSelectedImage}) 
{
    return (
                <div className={`relative transition ease-in duration-300 transform ${
                    show ? "" : "translate-y-16 opacity-0"
                }`} onClick={() => setSelectedImage(imageUrl)}>

                    <div className="absolute inset-0 z-10 flex transition duration-200 ease-in hover:opacity-0">
                        <div className="absolute inset-0 bg-black opacity-70"></div>
                        <div className="mx-auto text-white z-10 self-center uppercase tracking-widest text-sm">
                            Hello World
                        </div>
                    </div>
                    <img src ={imageUrl} />
                </div>
       
    );
}

I am super confused why using null with the setSelectedImagethrows 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.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
Brad G.
  • 93
  • 1
  • 12
  • I haven't tinkered with the code, but you could try useState<{image: null | string>({ email: null }); – Diogenis Siganos Jul 27 '21 at 06:29
  • 2
    Modal should really be a functional component – KiprasT Jul 27 '21 at 06:30
  • 1
    The problem is not the null, the problem is that setSelectedImage is not what you think it is. Try console.log(setSelectedImage) on the line before the error. Whatever it is, it's not the function you think it is. – see sharper Jul 27 '21 at 06:32
  • @KiprasT, Thank you! I updated it to match a component. I stopped the tutorial once this error popped. – Brad G. Jul 27 '21 at 06:57

0 Answers0