React functional component: enable/disable button based on a state value

Question

I use a component where I use the following code to update the 'active' flag value. I have a problem with updating the Button when the 'active' flag changes its value. At the moment, when 'active' is false, the button is disabled, then I select true and the button gets enabled. However, I can't make the button disabled again when selecting false. What should I change in order to enable/disable the Button whenever the active flag value changes?

const [active, setActive] = useState(props.limit.active)

const onSubmit = (e) => {
    const form = event.currentTarget
    if (form.checkValidity() === true) {
      e.preventDefault()

      if (props.onSubmit) {
        props.onSubmit({
          active: active,
        })
      }
    }
  }

  const handleActiveChange = (event) => {
    setActive(event.target.value)
  }

 return <Form onSubmit={onSubmit}>
  <Form.Group controlId='formGridActive'>
      <Form.Label>Active</Form.Label>
      <Form.Control name='active' value={active} as='select' onChange={handleActiveChange}>
        <option>true</option>
        <option>false</option>
      </Form.Control>
    </Form.Group>

    <Form.Group>
      <Button variant="primary" type="submit" disabled={!active} >Submit </Button>
    </Form.Group>

  </Form >
}

Alireza Amini · Accepted Answer · 2021-07-02 11:10:04Z

1

Option tag must have "value" property. Check this: https://www.w3schools.com/tags/att_option_value.asp

answered Jul 2, 2021 at 11:10

Alireza Amini

1,2501 gold badge8 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saral Karki · Accepted Answer · 2021-07-02 11:44:33Z

1

You can add value in option as well

<Form.Control name='active' value={active}  as='select' onChange={handleActiveChange}>
<option value={true}>True</option>
<option value={false}>False</option>
</Form.Control>

After onChange function runs FormControl will target value from option values

answered Jul 2, 2021 at 11:44

Saral Karki

5,4722 gold badges10 silver badges12 bronze badges

Collectives™ on Stack Overflow

React functional component: enable/disable button based on a state value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related