title: React collect child component data on some event from the parent component
body: <p>In react best practice is Data flow from parent to child, event's will be passed from child to parent.</p>
  <p><a href="https://i.stack.imgur.com/8VQkV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8VQkV.png" alt="How to a  avoid anti pattern for this UI? " /></a></p>
  <p>In this UI we have a parent component which contains 2 child components with forms. We now have to gather data from child components when the user clicks on the submit button in the parent.</p>
  <p>Possible solutions (Bad solutions | anti pattern):</p>
  <ol>
  <li>Pass ref from child and trigger child method from parent to collect data (Accessing child method from parent not a good idea)</li>
  </ol>
  <pre><code> &lt;Parent&gt;
      onFormData(data) {
       //here collect data from child
      }
  
      onSubmit() {
        //Trigger a method onData in child
        aRef.collectData()
      }
  
      &lt;child-A ref={aRef} onData={onFormData}&gt;&lt;/Child-A&gt;
      &lt;Child-B ref={bRef} onData={onFormData}&gt;&lt;/Child-B&gt;
      
      &lt;button onClick={onSubmit}&gt;Submit&lt;/Submit&gt; 
  &lt;/Parent&gt;
  </code></pre>
  <ol start="2">
  <li>Bind a props to child, on submit click change value of prop with dummy value. Observe same prop in useEffect hook ( Really bad solution)</li>
  </ol>
  <pre><code> &lt;Parent&gt;
      onFormData(data) {
       //here collect data from child
      }
  
      onSubmit() {
        //update randomValue, which will be observed in useEffect that calls onData method from child
        randomValue = Math.random();
      }
  
      &lt;child-A triggerSubmit={randomValue} onData={onFormData}&gt;&lt;/Child-A&gt;
      &lt;Child-B triggerSubmit={randomValue} onData={onFormData}&gt;&lt;/Child-B&gt;
      
      &lt;button onClick={onSubmit}&gt;Submit&lt;/Submit&gt; 
  &lt;/Parent&gt;
  </code></pre>
  <p>Is there any other best approach for handling these scenario?  How to a  avoid anti pattern for this UI?</p>