Fetching Data with Axios in React for AutoComplete Component

This article explains 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.