Removing disabled HTML attribute from a button does not allow to click it

Question

I have this button component in my React application:

<button onClick={() =>alert('hi')} disabled={true}>test</button>

I expected when I will remove disabled attribute in browser like:

<button disabled>test</button>

to:

<button>test</button>

The button should be clicked and alert should appear but it did not happen.

Why is the button not triggering alert message after removing the attribute inside the browser?

Answer 1

As per your code, I can see that you did not remove the disabled attribute. You only removed the {true} part. Keeping the disabled attribute, even if it is not set to true, will still disable the button, which is why it is not getting triggered. Try this :-

<button onClick={() => alert("hi")}>test</button>