title: Unable to pass data from Child Functional Component to React Parent Component (React.js)
body: <p>I am building an Autocomplete component in react so I can render individual autocomplete(s) in a single page; I want to render the suggestions from Autocomplete in a separate component.</p>
  
  <p>I tried using</p>
  
  <pre><code>class Parent extends Component {
  
      getData = (data) =&gt; {
          if (data) return data;
      };
  
      render () {
          &lt;AutoComplete passData={this.getData} /&gt;
          // after some other elements
          {this.getData()}
      }
  
  }
  </code></pre>
  
  <p>and</p>
  
  <pre><code>export const Child = (props) =&gt; {
      ...
      const updateSuggestion = (suggestions) =&gt; {
          this.props.passData(suggestions);
      }
  }
  </code></pre>
  
  <p>But somehow, it's failing me. To confuse me even more, if I just console.log the retrieved data using the code below, it works perfectly!</p>
  
  <pre><code>getData = (data) =&gt; {
      if (data) console.log(data);
  };
  </code></pre>
  
  <p>To complicate things even further, it fails me even if I return a hard-coded element:</p>
  
  <pre><code>getData = (data) =&gt; {
      if (data) return &lt;p&gt;Hello&lt;/p&gt;;
  };
  </code></pre>
  
  <p>Although it works when I remove <code>if (data)</code></p>
  
  <p>I'm completely lost as to what's happening here and would appreciate the slightest of help!</p>