i have a two column mega menu and i want when user hover a category, that category items to be displayed dynamic on second column .

i'm using typescript, the problem is when i wanna update the megaMenu state i get a red underline saying Property 'innerText' does not exist on type 'EventTarget'. why is this happening ? i really appreciate some help.

  const [megaMenu, setMegaMenu] = useState("");

return (
            <Grid onm ouseEnter={(e) => setMegaMenu(e.target.innerText)} >
             ....
             ....
             ....
             ....
             ....

            </Grid>
)

CodePudding user response：

You could type cast event target to HTMLElement and access innerText over it

<Grid onm ouseEnter={(e) => setMegaMenu((e.target as HTMLElement).innerText)} />