Breaking News: Grepper is joining You.com. Read the official announcement!

react disabled button

Add Answer

Jorge Ignacio Salia Leal answered on May 2, 2020 Popularity 10/10 Helpfulness 6/10

answer react disabled button

related disable a button react

related disable button in jsx

related disable button react

related how to disabled button in react

related button disabled react

related DisableButton in React js

react disabled button

Comment

import {useState} from 'react';

export default function App() {
  const [message, setMessage] = useState('');
  const isAnonymous = true;

  const handleClick = event => {
    event.currentTarget.disabled = true;
    console.log('button clicked');
  };

  return (
    <div>
      {/* ✅ disable button when input is empty */}
      <div>
        <input
          type="text"
          id="message"
          name="message"
          value={message}
          onChange={event => setMessage(event.target.value)}
        />
        <button disabled={!message}>Click</button>
      </div>

      <hr />

      {/* ✅ disable button */}
      <button disabled={true}>Click</button>

      <hr />

      {/* ✅ disable button conditionally */}
      <button disabled={isAnonymous ? true : false}>Click</button>

      <hr />

      {/* ✅ disable button after it has been clicked once */}
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: bobbyhadz.com

Tags: button javascript

Link to this answer
Share Copy Link

Contributed on Jan 05 2023

Jorge Ignacio Salia Leal

0 Answers Avg Quality 2/10

Closely Related Answers

disable a button react

Comment

// Input field listens to change, updates React's state and re-renders the component.
<input onChange={e => this.setState({ value: e.target.value })} value={this.state.value} />

// Button is disabled when input state is empty.
<button disabled={!this.state.value} />

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: button bu

Link to this answer
Share Copy Link

Contributed on May 02 2020

Nasty Narwhal

0 Answers Avg Quality 2/10

disable button in jsx

Comment

const buttonRef = useRef();

const disableButton = () =>{
  buttonRef.current.disabled = true; // this disables the button
 }

<button
className="btn btn-primary mt-2"
ref={buttonRef}
onClick={disableButton}
>
    Add
</button>

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: button bu

Link to this answer
Share Copy Link

Contributed on Oct 25 2021

Lucky Ladybird

0 Answers Avg Quality 2/10

disable button react

Comment

// Passing data through property
// When the member becomes 0, the button become disabled
<button
    disabled = {this.props.some_member === 0 ? 'disabled' : ''}
>
    Click me
</button>

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: button bu

Link to this answer
Share Copy Link

Contributed on Dec 02 2022

Innocent Iguana

0 Answers Avg Quality 2/10

how to disabled button in react

Comment

import React, { useState } from "react";

const YourComponent = () => {
  const [isDisabled, setDisabled] = useState(false);
  
  const handleSubmit = () => {
    console.log('Your button was clicked and is now disabled');
    setDisabled(true);
  }

  return (
      <button type="button" onClick={handleSubmit} disabled={isDisabled}>
        Submit
      </button>
  );
}

export default YourComponent;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: button javascript ja

Link to this answer
Share Copy Link

Contributed on Mar 30 2023

Cooperative Coyote

0 Answers Avg Quality 2/10

button disabled react

Comment

import React from 'react';

function App() {
  const [isButtonDisabled, setIsButtonDisabled] = React.useState(true);

  return (
    <div>
      <button disabled={isButtonDisabled}>Submit</button>
      <button onClick={() => setIsButtonDisabled(prevState => !prevState)}>Toggle</button>
    </div>
  );
}

export default App;

Popularity 7/10 Helpfulness 4/10 Language javascript

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

DisableButton in React js

Comment

import {useRef} from 'react';
let btnRef = useRef();

const onBtnClick = e => {
  if(btnRef.current){
    btnRef.current.setAttribute("disabled", "disabled");
  }
}

<button ref={btnRef} onClick={onBtnClick}>Send</button>

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 13 2022

beta pro

0 Answers Avg Quality 2/10

react disabled button

Contents

More Related Answers

react disabled button

Closely Related Answers

disable a button react

disable button in jsx

disable button react

how to disabled button in react

button disabled react

DisableButton in React js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.