Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

e.target.classList not exists on onClick event in react typescript

My issue is that e.target doesn't have the classList property when event handler for click is executing. Here is my code:

import React from 'react'

interface props{
    imageUrl: string,
    setSelectdImage : (value: React.SetStateAction<string>) => void

}

const Modal:React.FC<props> = ({imageUrl,setSelectdImage}) => {
    return (
        <div className='fixed top-0 left-0 w-full h-full bg-halfTransparent' onClick={ (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
            if(e.target.classList){  // here is issue
                setSelectdImage('')
            }
        }}>
            <img className="block max-w-4xl max-h-6 mt-24 mx-auto shadow-md" src={imageUrl} alt="large image"/>
            
        </div>
    )
}

export default Modal

thanks

like image 247
Prince Tanwar Avatar asked Sep 03 '25 06:09

Prince Tanwar


1 Answers

from Typescript 3.2.4 you can retrieve classList by this way:

(e.target as Element).classList

like image 96
Foyez Avatar answered Sep 04 '25 20:09

Foyez