converting react class to functional component with refs

Question

I'm trying to use a class example from a stackblitz file and convert it to a functional component.

I don't understand how the ref works, or where the event and args that are being used in the onTyping function are coming from. Can anyone explain where those are defined and how I'd translate this to a functional component?

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 (<div id='combodefault' className='control-pane'>
        <div className='control-section'>
        <div className='col-lg-12 control-wrappers'>
            <div id='default'>
            <AutoCompleteComponent id="games" dataSource={this.sportsData} ref={(AutoComplete) => { this.listObj = AutoComplete; }} placeholder="e.g. Basketball" actionBegin={this.onTyping}/>
            </div>
        </div>
        </div>
        
    </div>);
    }
}

render(<Default />, document.getElementById('sample'));

Answer 1

anything in the constructor will need to be translated to useState:

    this.temp = 'sportsData';
    // define the array of string
    this.sportsData = data[this.temp];

becomes:

const[temp, setTemp] = useState('sportsData');
const[sportsData, setSportsData] = useState(data[temp]);

setTemp and setSportsData are functions that you use to set the state variable temp and sportsData respectively. For example, the following will set temp to 'NFSSportsData'.

setTemp('NFLSportsData');

As for the ref, you can use the hook useRef.

const listObj = useRef(null);

for component life cycle method componentDidMount, you can use the following convention.

useEffect(()=>{
// your code
}, [])

the empty bracket [] signifies only to run the code once when the component mounts. If you want to code listen to a state variable, and runs every time the variable changes, you can do the following:

useEffect(()=>{
// your code
}, [sportsData])

This code above will run every time state variable sportsData changes.

I don't think there's a way to extend a functional component like you are doing with SampleBase. Looking at the SampleBase class, it's just running a function in the lifecycle component componentDidMount. You can do something like the following:

rendereComplete() {
    /**custom render complete function */
}
useEffect(()=>{
    setTimeout(() => {
    this.rendereComplete();
},[]);

To tie is all together, you have something like the following:

import './index.css';
import * as React from 'react';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import * as data from './dataSource.json';

export const Default = ()=> {
  const [temp, setTemp] = React.useState('sportsData');
  const [sportsData, setSportsData] = useState(data[this.temp]);
  const listObj = useRef(null);

  const onTyping = (args)=>{
    console.log('arg =', args);
  }
  
  const rendereComplete() {
        /**custom render complete function */
    }
  useEffect(()=>{
        setTimeout(() => {
        rendereComplete();
  },[]);
  return (<div id='combodefault' className='control-pane'>
  <div className='control-section'>
  <div className='col-lg-12 control-wrappers'>
      <div id='default'>
      <AutoCompleteComponent id="games" dataSource={sportsData} ref={(AutoComplete) => { listObj = AutoComplete; }} placeholder="e.g. Basketball" actionBegin={onTyping}/>
      </div>
  </div>
  </div>
  
</div>);
}