onClick not working but mouseOver working-CodePudding

<li>
  <a
    onClick={(e) => {
      editNestedComment(chldCmt, e);
    }}
  >
    Edit Comment
  </a>
</li>;

onClick is not working but mouseOver working fine.

CodePudding user response：

An anchor tag refreshes the page when clicked. To prevent this add e.preventDefault() to the onClick function

example:

<a
   onClick={e => {
         e.preventDefault()
         editNestedComment(chldCmt, e)
         }}
>
 Edit comment
</a>

Not too sure why you are using an anchor tag as you are not using a href to link anywhere. It makes much more sense to replace the anchor tag with a button tag and then this wouldn't be a problem.

E.g.

  <button
    onClick={e => {
      editNestedComment(chldCmt, e)
    }}
  >
    Edit Comment
  </button>

CodePudding user response：

Try sharing the code for the function that you passed as well. Here's the documentation: https://reactjs.org/docs/handling-events.html You should probably use a button:

<li>
  <button
    onClick={(e) =>
      editNestedComment(chldCmt, e)
    }
  >
    Edit Comment
  </button>
</li>;