pressing the button again will yield a new outcome

I am looking to disable a button (material ui) when it is clicked for the second time by setting disabled={true}. Unfortunately, I have not been able to find any examples related to this specific scenario on StackOverflow.

<Button
  onClick={this.startDraw.bind(this)}
  disabled={}
  startIcon={<Brush />}
>

Initially, the button is clickable and triggers an action when clicked. However, my goal is to make sure that when the same button is clicked again for the second time, it becomes disabled and cannot be clicked anymore.

javascripthtmlcssreactjstypescript

Answer №1

When using a Class component:

    state = {
    count: 0
    };
this.setState({ count: count + 1 }); // Ensure to use this line on your button click event

For the button section:

   <Button
    onClick={this.startDraw.bind(this)}
    disabled={state.count == 2}
    startIcon={<Brush />}
  />

If opting for a functional component, follow this approach:


   const [count , setCount ] = useState(0);
   setCount(count + 1) // Remember to utilize this line on your button triggering

    <Button
    onClick={this.startDraw.bind(this)}
    disabled={count == 2}
    startIcon={<Brush />}
/>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Determine if an element from the first array is present in the second array

I've encountered a challenge while building a simple react app and I could use some help. The Problem at Hand :- My goal is to compare items in firstArray (which contains separate dictionaries) with those in secondArray. While the loop for checking ...

javascriptreactjsarraysdictionary

What is the best way to align an element at the bottom in order to allow it to grow vertically

I have a unique structure on one of my pages that I want to use for a tooltip style behavior. When the "container" element is clicked, the "child" element, which is initially hidden, should appear above the container. However, since the child's height ...

htmlcsspositionalignment

Can you tell me the specific parameter used in the beforeSend function in jQuery?

I have been examining some instances of the beforeSend callback function. Sometimes, these examples include an input parameter: beforeSend:function(req) or beforeSend:function(xhr). I assume that this parameter represents the XMLHTTPRequest of the jquery ...

javascriptajaxjquery

Enhancing your JQuery Select2 plugin by incorporating a Checkbox feature

I am currently utilizing the jQuery select2 plugin to enable multiple selections. My goal is to incorporate a checkbox for each selectable option. Depending on whether the checkbox is checked or unchecked, the dropdown option should be selected accordingl ...

javascriptjqueryhtmlcssjquery-select2

Ways to display all utilized typescript types within a project

Here is a snippet of code I'm working with in my project: describe('Feature active', () => { it('Should render a Feature', () => { const wrapper = shallow(<MyComponent prop1={1}/>); expect(wrapper.prop('p ...

typescript

Exploring ES6 Property Assignment

After researching, I've discovered that ES6 does not support setting properties of a class and returning that class. class MyClass { constructor() { this.x = 0; this.y = 0; } update(value) { // logic this.y ...

javascriptnode.jsclassecmascript-6

Is it possible to retrieve a JSON response by making a jQuery.ajax request to an appengine URL?

Attempting to retrieve response data via ajax from the following URL: http://recipesid.appspot.com/api.user?method=user.query&[email protected] Encountering issues when trying to run the code. Please assist in resolving this problem. $.ajax({ ...

javascriptjqueryajaxjsongoogle-app-engine

Trouble with CSS3 Menu Layout and Gradient Display Issues

My task is to replicate this menu: I'm having trouble creating the gradient. Completed Why can't I see it in my code? http://jsfiddle.net/Vtr6d/ Here's what I currently have: CSS: .mainOptions{ float:left; margin:0 20px 0 20px; ...

htmlcssgradient

`Where can I find instructions for importing a React component I've created without using the node_modules folder?`

After creating a react component called my-shared-component, I bundled it using rollup and now have an output in the form of a dist folder. To avoid immediately publishing the component to npm, I decided to utilize npm link. However, when attempting npm l ...

reactjsnpmnpm-link

Struggling to access specific data within a JSON object? Wondering how to extract and display data from a JSON object in VUE?

Despite my extensive searching on Stack and the internet, I have not been able to find a solution to my problem. Currently, I am attempting to retrieve data from a JSON file located in the Vue src folder. The file contains three arrays with names that inc ...

javascriptarraysjsonvue.js

Is there a way to verify if an object exists in a Mobx observable array?

I'm implementing the indexOf method within a React component to style a button based on whether an object is present in a MobX observable array. The button serves the purpose of favoriting. It adds the object related to that specific list item into a ...

reactjsmobxmobx-react

Updating an object with AngularJS

Let's consider the code snippet below: var absenceType = {name: 'hello'}; this.newAbsenceType = angular.copy(absenceType); After making changes to this.newAbsenceType, you want to apply these changes to the original object. I have explore ...

javascriptangularjs

Display additional text when hovering over an object

Is there a way to make my text expand and display all of its content when hovered over, especially for those sections that are longer than the div size? I currently have some code implemented, but it seems to reveal the text horizontally. I am looking fo ...

htmlcss

What is the method for retrieving hotels from a database based on their proximity to a specific set of latitude and longitude coordinates?

I have a database table with latitude, longitude, and hotel locations. I want to create a feature that will show hotels near a specific point defined by latitude and longitude. Code Snippet function findNearbyHotels() { $this->lo ...

javascriptphpajax

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom

Navigating with nodeJS

Currently, I am in the process of learning how to create a Node.js project. My latest endeavor involved following a tutorial to develop a chat application. However, it seems like there is an issue with the routing between the server side and client side. ...

javascriptnode.jsexpressrouteshapi.js

How do I go about transferring a file using PHP?

I'm working on file uploads and saving them in a directory. However, I'm facing an issue: when a file is denied it needs to be deleted from the directory. This part is sorted out. But what if the file is approved? Should I use rename() or move_up ...

phphtml

Struggling with implementing the group by feature in AngularJS?

Currently, I am trying to group a select-window by 2 different object arrays - subcategories and rootcategories. Each subcategory has a relation id that links to the rootcategory's id. My goal is to have the dropdown window group the subcategories bas ...

javascripthtmlangularjs

Angular 4: Unhandled error occurred: TypeError - X does not exist as a constructor

I am currently developing a project in Angular 4, and I encountered an error while running the application. The specific error message is as follows - ERROR Error: Uncaught (in promise): TypeError: index_1.EmployeeBase is not a constructor TypeError: in ...

javascriptangularecmascript-6polyfillses6-shim

Utilizing JavaScript to Incorporate Node Packages

Sorry for the basic question, as I am fairly new to web development and JavaScript. I am trying to utilize a package that I installed via npm called shopify-buy by following the instructions provided at: The package is located in my node_modules director ...

javascriptnode.jsnpmshopify