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 setSelectedImage
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.