React event handler is not working at all

Question

import React from 'react';
import './Button.css';
import iconsdown from  './iconsdown.png' ;
import iconsnext from  './iconsnext.png';


function Button() {
  const handleEvent=(e) =>{
      console.log(e.target);
      document.write(42);
      const list = e.target.parentElement;
      const icon_down = e.target;

    }
  return (
    <div className='ul'>
        <li>Home</li>
        <li>View</li>
        <li>About</li>
        <li>Extra</li>
        <li className="down" onClick={() =>handleEvent}><img alt={'THIS IS AN IM'} width={30} height={30} src={iconsdown} /></li>
        <li className="next"><img alt={'THIS IS AN IM'}width={50} height={50} src={iconsnext} /></li>
    </div>
  )
}


export default Button

body{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

.ul{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap :15px;
    right: 2em;
    top:2em
}

.ul_click{
    top : 9px
}
li{
    list-style-type: none;
    font-size:1.3em;
    gap:5px;
    height:2em
}

.next{
    position: absolute;
    transform: rotate(180deg);
    opacity: 0;
    left: 12em;
    cursor: pointer;
}

.next_click{
    opacity: 1;
    animation: next 1s forwards;
}
@keyframes next {
    from{opacity:0 ;}
    to {opacity: 1;}
}


.down{
    cursor: pointer;
}
.down_click{
    cursor: pointer;
    opacity : 1;
    animation: clicking 2s;
    animation-fill-mode: forwards;
}

@keyframes clicking {
    from {opacity: 1}
    to {opacity: 0;}
}

@font-face {
    font-family: 'BeautifulPeoplePersonalUse';
    src: url(/BeautifulPeoplePersonalUse-dE0g.ttf) format('ttf');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.1.0/umd/react-dom.production.min.js"></script>

This is fairly simple demo. For some reason onClick event not working in Button app. I've tried on Chrome and Firefox. Used create-react-app and Vite . And the funny thing is it worked before but after some time event handler is not seems to responding .

i removed the screenshots and add code block .

Your JS code is correct. The best I can of is your arrows element is somehow overlapping with another element and thus your click event does not reach the element. — technophyle, Jan 13 '23 at 08:44

score 0 · Answer 1 · answered Jan 13 '23 at 08:42

0

Try

<li onClick={() => handleEvent()}></li>

I can't say why but this fixed a similar problem for me in a recent project.

answered Jan 13 '23 at 08:42

bar_ok

29
1
4

don't seems to working – rakib .h Jan 13 '23 at 08:48

score 0 · Answer 2 · answered Jan 14 '23 at 14:56

If the function you pass to an event handler only needs the event as an argument, you don't need to call it using an anonymous function, it will be passed to your function implicitly. just do

onClick={handleEvent}

If you do want to pass it with an anonymous function because you prefer the syntax or have multiple arguments you need to pass to it then you need to pass it to your function in the event handler explicitly

onClick={(e) => handleEvent(e)}

React event handler is not working at all

2 Answers2