title: how to call function of child in functional component from parent in react.js?
body: <p>I have two components:</p>
  <ol>
  <li>parent</li>
  <li>child</li>
  </ol>
  <p>The parent is class component and child is functional component. What is best practice to call child methods from the parent component?</p>
  <p>The goal of these components is to be able to load svg file dynamically.</p>
  <p>Parent component:</p>
  <pre><code>class UnitMonitor extends PureComponent {
    constructor() {
      super();
    }
    state = {
      img: null,
    };
    onChangeShcema = schemaID =&gt; {
      axios.get(&quot;/api/schemata/get-schemata-nodes/&quot; + schemaID).then(response =&gt; {
        let path = response.data[&quot;0&quot;][&quot;file&quot;];
        // call loadFile function of child component is needed
      });
  render() {
      return (
        &lt;Row type=&quot;flex&quot; className=&quot;&quot;&gt;
          &lt;Col span={25}&gt;
            &lt;SvgViewer /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      );
    }
    };
  </code></pre>
  <p>Child Component:</p>
  <pre><code>const SvgViewer = () =&gt; {
  
    const loadFile = path =&gt; { 
      let svgFile = require(&quot;./images/&quot; + path);
      const svg = document.querySelector(&quot;#svgobject&quot;);
      svg.setAttribute(&quot;data&quot;, svgFile);
    };
  
    return (
      &lt;div className=&quot;unit-schema-container1&quot;&gt;
        &lt;object id=&quot;svgobject&quot; type=&quot;image/svg+xml&quot; data={null}&gt;&lt;/object&gt;
      &lt;/div&gt;
    );
  };
  
  export default SvgViewer;
  </code></pre>