How can I toggle a FormControl from disabled to enabled with a button click in Reactjs

Question

I'm new to React and just started working with state so please bare with me. I also found a lot of similar questions but nothing that really addresses the following:

I have a reactstrap form that has disabled FormControls. When the user clicks the 'edit' button the FormControls need to be enabled. According to my knowledge, this should be simple with JSX but nothing I've tried has worked. It might just be a stupid implementation error on my side.

 class UserProfile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editToggle: false,
      userName: "Star Lord",
      accTier: "Premium",
      credit: "95 855 651", 
      vehicle: "The Milano",
      contact: "Echoe Golf Oscar 12.465Ghz"
    }
    
    // This binding is necessary to make `this` work in the callback
    this.editInputToggle = this.editInputToggle.bind(this);
  }

  editInputToggle() {
    this.setState(prevState => ({
      editToggle: !prevState.editToggle
    }));
  }

  onValueChange = (e) => {
    this.setState({ fullName: e.target.value });
};

  render() {
    const { editToggle } = this.state;

    // We need give the components function a return statement.
    return (
      /* The Component can only return one parent element,
      while parent elements can have many children */
      <div className='profileDetails'>
        {/* Bootstrap Form is used for the form
              Bootstrap Button is used for the edit button */}
        <Form id='formProfile'>
        
          <Form.Group className="mb-3" controlId="formProfileDetails">
            <Form.Label>US3RNAME:</Form.Label>
            <Form.Control type="text" value={this.state.userName}
            onChange={this.onValueChange}  className='user-info' />
            <Form.Label>ACC0uNT TI3R:</Form.Label>
            <Form.Control disabled type="text" value={this.state.accTier} onChange={this.onValueChange} className='user-info' />
            <Form.Label>CR3DiT:</Form.Label>
            <Form.Control disabled type="text" value={this.state.credit} onChange={this.onValueChange} className='user-info' />
            <Form.Label>R3GiSTERED VEHiCL3:</Form.Label>
            <Form.Control disabled type="text" value={this.state.vehicle} onChange={this.onValueChange} className='user-info' />
            <Form.Label>C0NTACT D3TAiLS:</Form.Label>
            <Form.Control disabled type="text" value={this.state.contact} onChange={this.onValueChange} className='user-info' />
          </Form.Group>

          <Button variant="light" size="sm" className='p-2 m-4 headerBtn' onClick={ () => this.editInputToggle(editToggle) }>
            Edit
          </Button>
        </Form>
      </div>
    );
  } 
}

What do I need to do to change "disabled" to ""?

Answer 1

For enabling the FormControl,

<Form.Control disabled={!this.state.editToggle} type="text" value={this.state.accTier} onChange={this.onValueChange} className='user-info' />