title: get data from multiple react child and send into one API
body: <p>I have 4 react component, called A, B, C and D. A is the parent component, B, C and D is the child component that placed in component A. Each component would produce data (user input), but the submit button/action placed in the parent component (component A). Then, all the data from all component will be sent into one API, called <a href="http://localhost:8000/create_data" rel="nofollow noreferrer">http://localhost:8000/create_data</a>. I make it sent into one API because I want to process all the data first then input in into my database.</p>
  
  <p>1st approach:
  the submit button is an onClick event which doing setState in componentA</p>
  
  <pre><code>state = {
      instruction: 'not submit'
  }
  
  instruction = () =&gt; {
      this.setState({
          instruction: 'submit'
      })
  }
  
  &lt;componentB instruction={this.state.instruction}/&gt;
  &lt;componentC instruction={this.state.instruction}/&gt;
  &lt;componentD instruction={this.state.instruction}/&gt;
  &lt;Button type="button" color="primary" onClick={this.instruction}&gt;Submit&lt;/Button&gt;
  </code></pre>
  
  <p>then, in each child component, I create componentWillReceiveProps(), looks like this:</p>
  
  <pre><code>componentWillReceiveProps = (val) =&gt; {
      const messages = 'this is from componentB';
      if (val.instruction === 'submit') {
          axios.post('http://localhost:8000/create_data', {
              value: messages
          })
      }
  }
  </code></pre>
  
  <p>in server,</p>
  
  <pre><code>app.post('/create_data', (req, res) =&gt; {
      console.log(req.body.value)
      // this single console log print three value:
      // this is from componentB
      // this is from componentC
      // this is from componentD
      // I dont know how to separate them
  })
  </code></pre>
  
  <p>2nd approach:
  I tried to pass one more props to each child, which is a function. So, when the this.state.instruction change into 'submit', I call the props function and passed the value from the child to the parent. I got the value, but then, how I suppose to send it into the one API since I pass three different function as props to each component.</p>
  
  <p>any other better way to achive it? thanks in advance</p>