React: Setting the Disabled Attribute Based on a State

React: setting the disabled attribute based on a state

You can set disabled property through boolean value, like this

<button
  type="button"
  disabled={this.state.submitting}
  onClick={this.handleSubmit}
>
  Submit
</button>

Example

How to add disabled attribute via prop to a button in react?

What you currently have should work perfectly fine. Be careful that when you use CustomButton you don't send in the value for disabled as a string. That will make it disabled regardless of what you pass in. Instead, you need to pass in a boolean, that's in JSX syntax.

Here's a sample usage where you would put it inside of a render function of a component that uses the button:

...
render() {
    <div>
        ...
        <CustomButton
            whenClicked={() => console.log('I just got clicked')}
            buttonText="Some Button"
            isDisabled={false}
        />
        ...
    </div>
   }
...

Basically, instead of false you could pass in something else. You could pass in a boolean value that's stored on the props of the container that holds the CustomButton.

You could say isDisabled={this.props.disableInnerButton} and it would work as you would expect. Changing the value of the boolean will disable or enable the button.

Below you can find a relevant answer I gave recently on a very similar topic:

Statement to add or not an attribute in JSX

Remove all disabled attribute with button click

You'll want to use React's state management for this. I'm not sure if this is inside of a class component or a functional component but here's how you can achieve what you're looking for.

Also the React documentation covers State and Lifecycles I would recommend reading through these.

Class Component CodePen:

class YourComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      inputsDisabled: true
    }
  }
  render() {
    return (
      ...yourcodehere
      <button onClick={() => this.setState({ inputsDisabled: false })}>Click Me</button>
      <input disabled={this.state.inputsDisabled} />
    )
  }
}

Functional Component:

const YourComponent = () => {
  const [inputsDisabled, setInputsDisabled] = React.useState(false)
    return (
      ...yourcodehere
      <button onClick={() => this.setState({ inputsDisabled: false })}>Click Me</button>
      <input disabled={inputsDisabled} />
    )
  }
}

Enable or Disable Form button in React based on condition

if you want to enable or disable your button on condition base then all you have to do is add ternary operator in your jsx like this

  <button id='my_button' disabled ={(activityChanged)?true:false}>Click Me</button>

How to disable a button in React.js until one or several form field value changes?

Using a state variable to store true/false values for disabled attribute in the button worked for both of the scenarios. I made changes by having state variables to store the field values.

const [name, setName] = useState('');
const [hometown, setHometown] = useState('');

//state to control the disabled attribute in the button
const [disabled, setDisabled] = useState(true);

and changed the input JSX to:

                  <input
                    type='text'
                    name='name'
                    defaultValue={currentUser.displayName}
                    ref={nameRef}
                    onChange={(e) => {
                      setName(e.target.value);
                      setDisabled(false);
                    }}
                  />

which would toggle the disabled state variable to true when the user enters some info in the fields(did the same for every input fields in the JSX).

And after the database is updated in the handleSubmitEditProfile() function, I added the line

setDisabled(true);

to toggle it back so that the button is disabled after submitting the form.

Disable checkbox for item that is not defaultChecked

At the moment you are initializing your aSelected and bSelected states by false value, to handle your scenario you can initialize your states by props in the constructor of your component, like below example:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      aSelected: props.selectedValue == 'a',
      bSelected: props.selectedValue == 'b',
    };
  }

  handleCheckboxChange = (e) => {
    const { checked, value } = e.target;
    if (value == 'a') {
      this.setState({ aSelected: checked });
    }

    if (value == 'b') {
      this.setState({ bSelected: checked });
    }
  };

  render() {
    return (
      <div>
        <input
          type="checkbox"
          value="a"
          onChange={this.handleCheckboxChange}
          defaultChecked={this.props.selectedValue == 'a'}
          disabled={
            this.state.aSelected ||
            (!this.state.aSelected && !this.state.bSelected)
              ? false
              : true
          }
        />

        <input
          type="checkbox"
          value="b"
          defaultChecked={this.props.selectedValue == 'b'}
          onChange={this.handleCheckboxChange}
          disabled={
            this.state.bSelected ||
            (!this.state.aSelected && !this.state.bSelected)
              ? false
              : true
          }
        />
      </div>
    );
  }
}

ReactDOM.render(<App selectedValue='a'/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>