Fetching Data with Axios in React for AutoComplete Component

This article provides a guide on how to fetch data using an Axios instance and bind it to an AutoComplete component upon initial loading in a React application.

Prerequisites

Before proceeding, make sure you have the following dependencies installed:

• Axios: A promise-based HTTP client for making HTTP requests.

Implementation

Below code snippet guide to fetch data using Axios and bind it to an AutoComplete component upon initial loading.

Step 1: Import Required Modules

Start by importing the necessary modules in your React component file:

import React from 'react';
import { render } from 'react-dom';
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
import axios from 'axios';
import './index.css';

Step 2: Create the React Component

Define a new class component Data that extends React.Component:

export class Data extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      countries: [],
      selectedValue: [],
      fields: { value: 'FirstName', text: 'FirstName' }
    };
  }
}

Step 3: Fetch Data Using Axios

Implement the componentDidMount lifecycle method to fetch data when the component mounts:

componentDidMount() {
  axios.get('https://ej2services.syncfusion.com/react/development/api/Employees')
    .then(({ data }) => {
      this.setState({
        countries: data,
        selectedValue: ['Andrew Fuller']
      });
    });
}

Step 4: Render the AutoComplete Component

Within the render method of your component, include the AutoCompleteComponent and bind the state data to its dataSource and value props:

render() {
  return (
    <div id="autodata" className="control-pane">
      <div className="control-section">
        <div className="col-lg-9">
          <div className="col-lg-6">
            <div id="local">
              <AutoCompleteComponent
                id="country"
                dataSource={this.state.countries}
                value={this.state.selectedValue}
                fields={this.state.fields}
                popupHeight="250px"
                placeholder="Select a country"
                filterType="StartsWith"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Step 5: Render the Component to the DOM

Finally, use the render function from react-dom to render your component:

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

For a live example and code, you can refer to the provided sample on StackBlitz:
React AutoComplete Axios - StackBlitz

Additional References

• Syncfusion AutoComplete Component: https://ej2.syncfusion.com/react/documentation/auto-complete/getting-started/

By following these steps, you can successfully fetch data using an Axios instance and bind it to an AutoComplete component in your React application.