ReactJS - How to get form value from multiple child component

Question

I know this might have some similar questions but I don't seem to able to find the solution for my situation.

I have a form that will be submitted with the content of the child component, the child component is appended onClick and can be appended infinitely. How can I get the value from all the child component, and to post it.

This is index.js

class ListOfProducts extends React.Component {
  constructor()
  {
    super();
    this.appendChild = this.appendChild.bind(this);
    this.state = {
      children: [],
      }
  }  

    appendChild() {
      this.setState({
        children: [
          ...this.state.children, <NewComponent/>
        ]
      });
    }

    render() {
      return (
        <form>
          <div>
            <pre><h2 className="h2"> Sales Order</h2></pre>
            <div className="box" style={{height: '520px', width: '1300px', position: 'relative', overflow: 'auto', padding: '0'}}>
            <div style={{height: '1000px', width: '1000px', padding: '10px'}}>

              <div>
                    {this.state.children.map(child => child )}
              </div>
            </div>
            </div>

          <button className="addbut" onClick={() => this.appendChild()}>Add Items</button>
          </div>
        </form>
    )  
  }
}

This is partial code of NewComponent.JS

            <select
              name="sel"
              className="sel"
              value={this.state.selecteditems}
              onChange={(e) => 
                this.setState({selecteditems: e.target.value})}
            >
            {this.state.data.map(item => 
              <option key={item.productID} value={item.unitPrice}>
                {item.itemName}
              </option>
            )}
            </select>

            {/*unit price*/}
            <p>Unit Price: RM {this.state.selecteditems} </p>

            {this.state.selecteditems.length ? (
              <p>Quantity: </p>
            ) : null }

            {/*button to add quantity*/}
            {this.state.selecteditems.length ? (
              <button onClick={this.addPro}> + </button>
            ) : null }

            {/*textbox for quantity*/}
            {this.state.selecteditems.length ? (
              <input type="text" ref="quan" placeholder="Quantity" 
                value={this.state.quantity}
                onChange={(e) => 
                  this.setState({quantity: e.target.value})}
                >
                </input>
            ) : null }

            {/*button to decrease quantity}*/}
            {this.state.selecteditems.length ? (
              <button onClick={this.decPro}> - </button>
            ) : null }

            {/*subtotal*/}
            {this.state.selecteditems.length ? (
              <p>Sub Total: RM {this.state.subtot} </p>
            ) : null }

Thanks in advance!

Answer 1

There are two ways I can think of getting the value from the child component -

1. Have a state management system (something like redux) which can actually store the data of all the child components. As and when the child component's data changes, it should be synced to the store and the same can be used by the parent to post the data on submit.
2. Assign ref to each of the child component when it gets appended. save those ref values in a array. Iterate through those references on submit of the form and call some specific getter function of child component to give you its data.

Preferred way is the first method.

Answer 2

Quick and dumb: add callback like this

<NewComponent onChange={this.onNewComponentChange}/>

(and implement calling of this onChange callback at every change at NewComponent of course)