How to enable/ disable react form based on condition - reactjs

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>
...