title: converting react class to functional component with refs
body: <p>I'm trying to use a class example from a <a href="https://stackblitz.com/edit/react-6yxx2s-ws9f9w?file=index.js" rel="nofollow noreferrer">stackblitz file</a> and convert it to a functional component.</p>
  <p>I don't understand how the ref works, or where the <code>event</code> and <code>args</code> that are being used in the <code>onTyping</code> function are coming from. Can anyone explain where those are defined and how I'd translate this to a functional component?</p>
  <pre><code>import { render } from 'react-dom';
  import './index.css';
  import * as React from 'react';
  import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
  import { SampleBase } from './sample-base';
  
  import * as data from './dataSource.json';
  export class Default extends SampleBase {
      constructor() {
          super(...arguments);
          this.temp = 'sportsData';
          // define the array of string
          this.sportsData = data[this.temp];
      }
      onTyping(args) {
  console.log(event.target.value);
      }
      render() {
          return (&lt;div id='combodefault' className='control-pane'&gt;
          &lt;div className='control-section'&gt;
          &lt;div className='col-lg-12 control-wrappers'&gt;
              &lt;div id='default'&gt;
              &lt;AutoCompleteComponent id=&quot;games&quot; dataSource={this.sportsData} ref={(AutoComplete) =&gt; { this.listObj = AutoComplete; }} placeholder=&quot;e.g. Basketball&quot; actionBegin={this.onTyping}/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          
      &lt;/div&gt;);
      }
  }
  
  render(&lt;Default /&gt;, document.getElementById('sample'));
  </code></pre>