When a button (material ui) is clicked for a second time, I want that button to be disabled (disabled={true}). I did not find any example related to this on StackOverflow.
<Button
onClick={this.startDraw.bind(this)}
disabled={}
startIcon={<Brush />}
>At first, the button is clickable. When it is clicked, something happens, but when this same button is clicked a second time, the button should be disabled (cannot be clicked anymore).
For Class component use
state = {
count: 0
};
this.setState({ count: count + 1 }); // use this on your button click
and for the button part
<Button
onClick={this.startDraw.bind(this)}
disabled={count == 2}
startIcon={<Brush />}
/>
for functional component use this approach
const [count , setCount ] = useState(0);
setCount(count + 1) // use this on your button call
<Button
onClick={this.startDraw.bind(this)}
disabled={count == 2}
startIcon={<Brush />}
/>