title: How to access inner virtual DOM elements on onChange call from a parent component in React
body: <p>Consider the following example:</p>
  <pre><code>const ChildComponent = ({funcFromParent}) =&gt; {
  
    const funcFromChild = (e) =&gt; {
      funcFromParent(e)
    }
  
    return (
      &lt;&gt;
        &lt;h1&gt;ChildComponent&lt;/h1&gt;
  
        &lt;div className=&quot;myCoolDiv&quot; onChange={funcFromChild}&gt;
          &lt;div className=&quot;myCoolDivTwo&quot;&gt;
            &lt;input type=&quot;text&quot; className=&quot;myCoolInput&quot;/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>So, when I get the call from the <code>funcFromParent</code> back to my <code>ParentComponent</code>, how am I supposed to access the inner DOM properties? I mean, I know there's a virtual DOM in React and all that, but is there any standardize/practical way that isn't considered a bad practice to access, say, <code>myCoolInput</code>?</p>
  <p>Thanks!</p>