Permanently disable button

Question

In React, can I disable a button when the logged in user is a member?

When I use the disabled attribute, it can be removed from the developer tools and the button is reactivated.

Please help me, I want the button to remain disabled when the logged in user is a member. Even if the disabled attribute is removed from the developer tools, the button should still remain disabled.

Answer 1

You can use the disabled attribute to disable a button, but this does not prevent the user from removing the disabled attribute and re-enabling the button in the development tools. To avoid this, you should also use the disabled value to conditionally handle the button's click event listener.

For example:

import { useState } from "react";

export default function App() {
  const [disabled, setDisabled] = useState(false);
  const handleClick = (e) => {
    console.log(e.target);
  };

  return (
    <div className="App">
      <button onClick={() => setDisabled((disabled) => !disabled)}>
        disable button
      </button>
      <button disabled={disabled} onClick={disabled ? null : handleClick}>
        click
      </button>
    </div>
  );
}

This way, even if the user removes the disabled attribute, the button will not have any click handler attached to it.