How to enable/ disable react form based on condition

Question

I have an react js form.I would like to know how to enable/disable all form input control based on condition.please check my below code and advise how to do this...

return (
      <form id ="frm" onSubmit={this.onSubmitHandler}>

      <div className="animated fadeIn">
                <div className="form-group row">
<Button type="button"   text="Back" size="sm" onClick={this.onBackButtonClick} color="danger" className="pull-right  ml-1 "><i className="fa fa-ban"></i> Back</Button>
                       <Button type="submit" size="sm" color="success"  className="pull-right  ml-1 "><i className="fa fa-dot-circle-o"></i> Save</Button>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Last Name</label>
                  <div className="col-sm-3">
                    <input type="text" name="LastName" className="form-control form-control-sm" id="TxtLastName" placeholder="Last Name" value={this.state.LastName} required onChange={this.onChangeHandler}/>
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Email Id</label>
                  <div className="col-sm-3">
                    <input type="email" name ="EmailId" className="form-control form-control-sm" id="TxtEmailId" placeholder="EmailId" value={this.state.EmailId} required onChange={this.onChangeHandler}/>
                  </div>

                </div>

                <div className="form-group row">
                  <label  className="col-sm-1 col-form-label col-form-label-sm">Mobile No</label>
                  <div className="col-sm-3">
                    <input type="text" name ="MobileNo" className="form-control form-control-sm" id="TxtMobileNo" placeholder="Mobile No" value={this.state.MobileNo} onChange={this.onChangeHandler} />
                  </div>

                  <label  className="col-sm-1 col-form-label col-form-label-sm">Division</label>
                  <div className="col-sm-3">
                     <select name ="DivisionId" className="form-control" required value={this.state.DivisionId} onChange={this.onChangeHandler}>
                        {DivisionList}
                      </select>   
                  </div>


           /div>
          </form>
    );

ComponentDidMount Event to check condition :-

componentDidMount() {
if (this.props.match.params.mode=="Edit"){
// enable form control
}
else
{
// disable form control
}

Answer 1

• create a state isFormDisabled for ex.
• use html fieldset inside the form and use disabled property and provide the value of isFormDisabled
• use your logic to enable/disable based on your needs

Code Sample

    ...
    state = {
        isFormDisabled: false
    }


    componentDidMount(){
      if (this.props.match.params.mode == "Edit") {
          this.setState({isFormDisabled: false})
      }
      else {
          this.setState({isFormDisabled: true})
      }
    }

    ...
    //inside render fun...
    return (
        <form id ="frm" onSubmit={this.onSubmitHandler}>
            <fieldset disabled={isFormDisabled}>
            <div className="animated fadeIn">
                <div className="form-group row">
                    <label  className="col-sm-1 col-form-label col-form-label-sm">First Name</label>
                    <div className="col-sm-3">
                        <input type="text" name="FirstName" className="form-control form-control-sm" id="TxtFirstName" placeholder="First Name" value={this.state.FirstName} required onChange={this.onChangeHandler}/>
                    </div>
              ...
           </fieldset>
              ...