Custom value in React Multi select component

21 Feb 20266 minutes to read

The MultiSelect enables users to add new custom options not present in the original dataset when allowCustomValue is enabled. When a custom value is selected, the customValueSelection event is triggered.

The following sample demonstrates configuration of custom value support with the MultiSelect component.

[Class-component]

index.jsx

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
    // define the JSON of data
    sportsData = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];
    // maps the appropriate column to fields property
    fields = { text: 'sports', value: 'id' };
    render() {
        return (
        // specifies the tag for render the MultiSelect component
        <MultiSelectComponent id="mtselement" dataSource={this.sportsData} fields={this.fields} placeholder="Select a game" allowCustomValue={true}/>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

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

export default class App extends React.Component<{}, {}> {

    // define the JSON of data
    private sportsData: { [key: string]: Object }[] = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];

    // maps the appropriate column to fields property
    private fields: object = { text: 'sports', value: 'id' };

    public render() {
        return (
             // specifies the tag for render the MultiSelect component
            <MultiSelectComponent id="mtselement" dataSource={this.sportsData} fields={this.fields} placeholder="Select a game"  allowCustomValue={true} />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));

[Functional-component]

index.jsx

import { MultiSelectComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
function App() {
    // define the JSON of data
    const sportsData = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];
    // maps the appropriate column to fields property
    const fields = { text: 'sports', value: 'id' };
    return (
    // specifies the tag for render the MultiSelect component
    <MultiSelectComponent id="mtselement" dataSource={sportsData} fields={fields} placeholder="Select a game" allowCustomValue={true}/>);
}
ReactDOM.render(<App />, document.getElementById('sample'));

index.tsx

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

function App() {

    // define the JSON of data
    const sportsData: { [key: string]: Object }[] = [
        { id: 'game1', sports: 'Badminton' },
        { id: 'game2', sports: 'Football' },
        { id: 'game3', sports: 'Tennis' }
    ];

    // maps the appropriate column to fields property
    const fields: object = { text: 'sports', value: 'id' };

    return (
    // specifies the tag for render the MultiSelect component
        <MultiSelectComponent id="mtselement" dataSource={sportsData} fields={fields} placeholder="Select a game"  allowCustomValue={true} />
    );
}
ReactDOM.render(<App />, document.getElementById('sample'));