Clear item in React Drop down list component

21 Feb 20263 minutes to read

Clear the selected item using one of two methods:

Through interaction: Click the clear icon in the DropDownList element to clear the selected item. Enable the clear icon using the showClearButton property.

Programmatically: Set the index, text, or value property to null to clear the selected item.

The following example demonstrate about how to clear the selected item in DropDownList.

index.jsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    dropDownListObject;
    sportsData = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
    onclick() {
        this.dropDownListObject.value = null;
    }
    render() {
        return (
        // specifies the tag for render the DropDownList component
        <div>
        <DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.sportsData} placeholder="Select a game"/>
        <button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}> Set null to value property</button>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';

export default class App extends React.Component<{}, {}> {
  private dropDownListObject: any;
  private sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
  public onclick() {
    this.dropDownListObject.value = null;
  }
  public render() {
    return (
      // specifies the tag for render the DropDownList component
      <div>
        <DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.sportsData} placeholder="Select a game" />
        <button id='btn' className="e-control e-btn" onClick={this.onclick = this.onclick.bind(this)}> Set null to value property</button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));