0

I have an <a> tag with a child <span>.

<a href="# " id={"biography_process_btn" + index} 
    className={`${low.mb_btn} ${low.mb_btn_kn} scale set_process scout-list- 
    process`} 
    data-no={index} data-processid={k.Process.id} data-jobid= 
    {k.Process.job_id} 
    data-jobexists={k.Process.phase_alias} 
    onClick={handleClick}
>
<span>Text</span>
</a>

const handleClick = (e) => {
     let kind = '';
     console.log(e.target.classList);
}

When ever user click on anchor tag or span I have to check 'someClassName' exist in classList of anchor tag. When I am clicking on span, I am not getting the classList from anchor tag but when I click outside of <span> and inside <a> tag then I am getting the class List.

How can I get the list of classNames from anchor tag when handleClick is called ?

00noob
  • 152
  • 1
  • 10
  • @OkanKaradag `classList` is already an array containing all classes there is no need to use `className` and `split`. Besides that how should using `className` solve the problem? – t.niese Aug 24 '22 at 08:03
  • 1
    Use `currentTarget` instead of `target`: [What is the exact difference between currentTarget property and target property](https://stackoverflow.com/questions/10086427/what-is-the-exact-difference-between-currenttarget-property-and-target-property) – t.niese Aug 24 '22 at 08:04
  • 1
    Sounds like you want `e.currentTarget` rather than `e.target`. Better though would be to just calculate the list of classes from the state variables you're using and just read that in your handler. – Robin Zigmond Aug 24 '22 at 08:05
  • change this onClick={handleClick} to onClick={(e)=>handleClick(e)}, – Astro Aug 24 '22 at 08:09
  • 1
    @Astro how should that change anything? – t.niese Aug 24 '22 at 08:14

0 Answers0