Disable submit button if no change is done to the form

Question

I have a form which uses react-bootstrap components and when the form loads,the fields will be populated with default values and these fields can be edited. I want to keep my submit button disabled if no change is done for the form. If any change is done for the form, i want the submit button to be able to submit.

In angularjs you can do this using pristine , dirty etc. How can i do it in reactjs and react bootstrap?

My form

<Form noValidate validated={validated} onSubmit={this.handleSubmit}>
   <div id="" className="pb-3 pr-lg-5 pr-xs-0">
      <div id="form_data" className="pb-3 pr-0">

         <Form.Group as={Row} controlId="formAddress">
            <Form.Label column sm="2" lg="4">
               <label className="label_type2">Address</label>
            </Form.Label>
            <Col sm="10" lg="8">
            <Form.Control type="text" defaultValue={login.userInfoLoading === true ? 'Loading...' : userInfoAddress.address} className="input_text" required />
            </Col>
         </Form.Group>

         <Form.Group as={Row} controlId="formPostalCode">
            <Form.Label column sm="2" lg="4">
               <label className="label_type2">Postal code</label>
            </Form.Label>
            <Col sm="10" lg="4">
            <Form.Control type="text" defaultValue={login.userInfoLoading === true ? 'Loading...' : userInfoAddress.cep} className="input_text" required />
            </Col>
         </Form.Group>
      </div>

      <Button type="submit" size="lg" variant="light" className="mt-5 mb-3 btn_type1" id="button_primary_clr">Update information</Button>
   </div>
</Form>

Answer 1

Since you are not using redux form, i will explain the logic how you need to achieve it

So your state will have a key and value like the below format, these are the pre populated values

state = {formValues:{firstName: 'John', secondName: 'Doe', Address: ''}, isFormDirty: false}

So based on the initial state of isFormDirty you can disable the button, since there is no changes

Now you need to attach a method to Form at the top level, since event delegation happens you will get the event from the child input so assume firstName field user has changed now you can have a object as inside state when the component loads

changedValues: {firstName: false, secondName: false, Address: false}

Now you have two objects changedValues and formValues

onFormHandleChange = (e) => {
 // compare the current value and pre populated value
  e.target.value === formValues[e.target.name]
// if its true
 changedValues[e.target.name] = true
 else false
}

so based on this changedValues object like Object.values(this.state.changedValues) array contains true you can make isFormDirty to true

since state updated your button gets enabled

I hope this will give a better understanding of the problem