I have a large HTML Form and it has multiple fields in multiple ponents.

All these ponents are in a Parent Component.

How Can I submit a form and getting values from all child ponents?

<form>
  <Col md={6} className="mb-3">
     <SameDay />
  </Col>
  <Col md={6} className="mb-3">
     <International />
  </Col>
  <Col md={6} className="mb-3">
     <OutBondTracking/>
  </Col>
  <Col md={6} className="mb-3">
     <FulfilmentOptions />
  </Col>
  <button
    type="button"
    className="btn btn-primary mr-2"
    onClick={() => this.submitHandler()}
  >
    Submit
  </button>
</form>

I have a large HTML Form and it has multiple fields in multiple ponents.

All these ponents are in a Parent Component.

How Can I submit a form and getting values from all child ponents?

<form>
  <Col md={6} className="mb-3">
     <SameDay />
  </Col>
  <Col md={6} className="mb-3">
     <International />
  </Col>
  <Col md={6} className="mb-3">
     <OutBondTracking/>
  </Col>
  <Col md={6} className="mb-3">
     <FulfilmentOptions />
  </Col>
  <button
    type="button"
    className="btn btn-primary mr-2"
    onClick={() => this.submitHandler()}
  >
    Submit
  </button>
</form>

• javascript
• html
• reactjs

• 2 It depends. Are you implementing state at all? – Cat_Enthusiast Commented Sep 13, 2019 at 7:09
• 1 FYI: you can use onClick={this.submitHandler} instead of onClick={() => this.submitHandler()} – Derek Jin Commented Sep 13, 2019 at 7:22
• 1 Are you using and library to maintain state, like redux? – sSD Commented Sep 13, 2019 at 7:26
• @sSDYes I am using Redux – Tarun Nagpal Commented Sep 13, 2019 at 9:56

3 Answers 3

you can pass a handler function in the subponents(child ponents) that gets triggered when anything changes and updates the state in the parent ponent eg:

class ParentComponent extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      data: {} . // form data
    }

  }

  onChangeHandlerFn = (data) => {
    // update the state;
    this.setState({ data })
  }

  submitHandler = () => {
    // your handler function
     post your data from the state (data)
  }


   render() {
     return (
        <form>
          <Col md={6} className="mb-3">
                       <SameDay />
                    </Col>
                    <Col md={6} className="mb-3">
                        <International onChangeHandlerFn={this.onChangeHandlerFn}/>
                    </Col>
                    <Col md={6} className="mb-3">
                        <OutBondTracking onChangeHandlerFn={this.onChangeHandlerFn} />
                    </Col>
                    <Col md={6} className="mb-3">
                        <FulfilmentOptions onChangeHandlerFn={this.onChangeHandlerFn} />
                    </Col>
                  <button type="button" className="btn btn-primary mr-2"  onClick= 
                 {this.submitHandler}>Submit</button>
       </form>
     );
   }
}

handler function onChangeHandlerFn={this.onChangeHandlerFn}, should be called if anything is changed in the child ponents, which intern updates the state of the parent ponent

Hope this helps !!

@Tarun, as you have mentioned you are using redux then you can create a reducer with states having all fields name like:

 const formState = {
    name: null,
    age: 4,
    address: null
};

for every input like textfield, textarea, checkbox attach a onchange event which changes the state of the formState by dispatching actions.

Use React refs and named input fields.

class ParentComponent extends React.Component {
  constructor (props) {
    super(props);
    this.form = React.createRef(); // <------ Create a Ref
  }

  submitHandler = () => {
   const form = this.form.current
   alert(`sameday: ${form['sameday'].value}, international: ${form['international'].value}`)
  }

  render () {
     return (
        <form ref={this.form}> // <------ Hook the Ref
          <Col md={6} className="mb-3">
             <SameDay name='sameday' /> // <------ Pass 'name' prop
          </Col>
          <Col md={6} className="mb-3">
             <International name='international'/>
          </Col>
          <button onClick={this.submitHandler}>Submit</button>
        </form>
     );
   }
}

PS You have to attach the names passed as props in your Input Field Components as an attribute to the <input> tag used in their respective code. Read more about form name attribute here.

Working Example: https://stackblitz./edit/react-shtnxj