'How to disable an <a> tag in React after clicking it?

How can I disable the below anchor tag in React after it has been clicked? Like the onClick functionality is not working on the anchor tag.

<td align="left">
  <input
    type="file"
    accept=".csv,.xlsx,.xls"
    name="image"
    className="file-upload-input"
    onChange={(e: any) => {
      handleFileChange(e, data.c_id);
    }}
  />

  <a
    href="javascript:;"
    className="btn btn-secondary"
    style={{
      width: "125.62px",
      backgroundColor: "#0b5ed7",
      borderColor: "#0a58ca"
    }}
  >
    <img src={UploadIcon.default} />
    Upload
  </a>
</td>


Solution 1:[1]

try to put a button within tag ,that way you can conditionally disable it.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ertemishakk