React | How to remove prevent.default from state update

Question

I have a state update function, that on click, renders a Modal. Here is the function:

  openDeleteUserModal = ({ row }: { row: IUser | null }): any => (
    event: React.SyntheticEvent
  ): void => {
    if (event) event.preventDefault();
    this.setState({ userToDelete: row, isDeleteUserModalOpen: true });
  };

The problem with this, is that the element that is click is an a tag, with an href.

export const userDeleteRenderer = (options: any): any => (
  cell: string,
  row: string
): JSX.Element => {
  const deleteUserClick = options.onClick({ cell, row });
  return (
    <div className="float-right" data-test="delete-icon">
      <a href="#" className="text-danger p-1 text-lg" onClick={deleteUserClick}>
        <Icon icon="trash" />
      </a>
    </div>
  );
};

So, if I remove the prevent default and do something like this, the modal is immediately called. Debugged and can't find out why.

Can you help me remove the prevent default from the above. It makes my testing life very difficult. And it is cleaner if I remove it. Thanks!!

Answer 1

You could use something like this:

<a href="javascript:void(0)" className="text-danger p-1 text-lg" onClick={deleteUserClick}>
  <Icon icon="trash" />
</a>

But if you only need the cursor, you can make it with CSS like this:

<div onClick={deleteUserClick} style={{cursor: "pointer"}}>
  <Icon icon="trash" />
</div>