I want to disable a button in my react project, where I have used MUI css framework. But now I want to know how can I disable button after one click.

<Button variant="contained" 
  onClick={()=>handleAdd(course)}
disabled=?
>

I want to disable a button in my react project, where I have used MUI css framework. But now I want to know how can I disable button after one click.

<Button variant="contained" 
  onClick={()=>handleAdd(course)}
disabled=?
>

• javascript
• reactjs
• material-ui

Share Improve this question Follow edited Sep 25, 2022 at 12:37 MD. Istiak Shamim Shishir asked Sep 25, 2022 at 12:37 MD. Istiak Shamim ShishirMD. Istiak Shamim Shishir 2111 silver badge33 bronze badges 1

• Have you even tried to find it ? React Materials-UI disable a button in a handler – debugger Commented Sep 25, 2022 at 12:44

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You want to create a new state using useState hook named for example isClicked and change your handleAdd function to set the state to true after a click.

const [isClicked, setIsClicked] = useState(false);

Then in your handleAdd method add something like:

if(!isClicked) setIsClicked(true)

And finaly in your Button ponent, set disabled to this state.

disabled = {isClicked}

Hope this helps :).

disabled={currentGroupForm.name?.length === 0 ||
    currentGroupForm.sapNumber?.length === 0 }