OnClick event not firing on first click in React

user_13964963 0
Viewed 1022

OnClick event not firing in react app on the first click and sometimes it takes more than 2/3 click to fire but sometimes firing in one click.I found it's not firing from the button. How to solve this problem?

{url !== 'http://localhost:3000/assistant/doctors' && (
                        <td
                            style={{ width: '10%' }}
                            className={[styles.tdBtn, styles.iconBtn].join(' ')}
                        >
                            <button onClick={() => handleUpdateData(id)}>
                                <FontAwesomeIcon icon={faPen} />
                            </button>{' '}
                            <button onClick={() => handleDelData(id)}>
                                <FontAwesomeIcon icon={faTrashAlt} />
                            </button>
                        </td>
                    )}
reactjs onclick event-handling
1 Answers

From given example, I can guess it's because of React 17 changes in event delegation method. To prevent such behavior, you can call stopPropagation on event:

const handleUpdateData = (e, id) => {
  e.stopPropagation();
  // rest of your code
}

You now have to use:

onClick={(event) => handleUpdateData(event, id)}
user_21387520
Related