Working with Data in React Mention

The React Mention loads data from local or remote sources using the dataSource property. It supports both array and DataManager data types.

The React Mention also supports different kinds of data services such as OData V4 and Web API, and data formats such as XML, JSON, and JSONP with the help of DataManager adaptors.

Fields Type Description
text string Specifies the display text of each list item.
value number or string Specifies the hidden data value mapped to each list item that should contain a unique value.
groupBy string Specifies the category under which the list item has to be grouped.
iconCss string Specifies the icon class of each list item.

When binding complex data to the React Mention, fields should be mapped correctly. Otherwise, the selected item remains undefined.

Binding local data

Local data can be represented in three ways as described in the following.

Array of simple data

The React Mention supports loading primitive data arrays such as strings and numbers. For primitive data, both the value and text fields represent the same data.

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.userData}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.userData} ></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let userData = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={userData}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  let mentionTarget: string = '#mentionElement';
  let userData: string[] = ['Selma Rose', 'Garth', 'Robert', 'William', 'Joseph'];

    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={userData} ></MentionComponent>
      </div>
    );
}

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

Array of JSON data

The React Mention generates list items from JSON data arrays. Map the appropriate columns to the fields property.

In the following example, the ID and Game columns are mapped to the value and text fields respectively:

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    sportsData = [
        { ID: 'game1', Game: 'Badminton' },
        { ID: 'game2', Game: 'Football' },
        { ID: 'game3', Game: 'Tennis' },
        { ID: 'game4', Game: 'Hockey' },
        { ID: 'game5', Game: 'Basketball' }
    ];
    fields = { text: 'Game', value: 'ID' };
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag sport'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.sportsData} fields={this.fields}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private sportsData: { [key: string]: Object }[] = [
    { ID: 'game1', Game: 'Badminton' },
    { ID: 'game2', Game: 'Football' },
    { ID: 'game3', Game: 'Tennis' },
    { ID: 'game4', Game: 'Hockey' },
    { ID: 'game5', Game: 'Basketball' }
  ];
  private fields:Object = { text: 'Game', value: 'ID' }
  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag sport'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.sportsData} fields={this.fields} ></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let sportsData = [
        { ID: 'game1', Game: 'Badminton' },
        { ID: 'game2', Game: 'Football' },
        { ID: 'game3', Game: 'Tennis' },
        { ID: 'game4', Game: 'Hockey' },
        { ID: 'game5', Game: 'Basketball' }
    ];
    let fields = { text: 'Game', value: 'ID' };
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag sport'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={sportsData} fields={fields}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App () {
  let mentionTarget: string = '#mentionElement';
  let sportsData: { [key: string]: Object }[] = [
    { ID: 'game1', Game: 'Badminton' },
    { ID: 'game2', Game: 'Football' },
    { ID: 'game3', Game: 'Tennis' },
    { ID: 'game4', Game: 'Hockey' },
    { ID: 'game5', Game: 'Basketball' }
  ];
  let fields:Object = { text: 'Game', value: 'ID' }

    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag sport'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={sportsData} fields={fields} ></MentionComponent>
      </div>
    );
}

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

Array of Complex data

The React Mention generates list items from complex nested data. Map the appropriate nested columns to the fields property.

In the following example, the Code.ID and Country.Name columns are mapped to the value and text fields respectively:

[Class-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    countriesData = [
        { Country: { Name: 'Australia' }, Code: { ID: 'AU' } },
        { Country: { Name: 'Bermuda' }, Code: { ID: 'BM' } },
        { Country: { Name: 'Canada' }, Code: { ID: 'CA' } },
        { Country: { Name: 'Cameroon' }, Code: { ID: 'CM' } },
        { Country: { Name: 'Denmark' }, Code: { ID: 'DK' } },
        { Country: { Name: 'France' }, Code: { ID: 'FR' } },
    ];
    fields = { text: 'Country.Name', value: 'Code.ID' };
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag country'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.countriesData} fields={this.fields}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

export default class App extends React.Component<{}, {}> {
  private mentionTarget: string = '#mentionElement';
  private countriesData: { [key: string]: Object }[] = [
    { Country: { Name: 'Australia' }, Code: { ID: 'AU' } },
    { Country: { Name: 'Bermuda' }, Code: { ID: 'BM' } },
    { Country: { Name: 'Canada' }, Code: { ID: 'CA' } },
    { Country: { Name: 'Cameroon' }, Code: { ID: 'CM' } },
    { Country: { Name: 'Denmark' }, Code: { ID: 'DK' } },
    { Country: { Name: 'France' }, Code: { ID: 'FR' } },
  ];
  private fields: Object = { text: 'Country.Name',value: 'Code.ID'};
  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag country'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={this.mentionTarget} dataSource={this.countriesData} fields={this.fields} ></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";
function App() {
    let mentionTarget = '#mentionElement';
    let countriesData = [
        { Country: { Name: 'Australia' }, Code: { ID: 'AU' } },
        { Country: { Name: 'Bermuda' }, Code: { ID: 'BM' } },
        { Country: { Name: 'Canada' }, Code: { ID: 'CA' } },
        { Country: { Name: 'Cameroon' }, Code: { ID: 'CM' } },
        { Country: { Name: 'Denmark' }, Code: { ID: 'DK' } },
        { Country: { Name: 'France' }, Code: { ID: 'FR' } },
    ];
    let fields = { text: 'Country.Name', value: 'Code.ID' };
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag country'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={countriesData} fields={fields}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from "react-dom";

function App (){
  let mentionTarget: string = '#mentionElement';
  let countriesData: { [key: string]: Object }[] = [
    { Country: { Name: 'Australia' }, Code: { ID: 'AU' } },
    { Country: { Name: 'Bermuda' }, Code: { ID: 'BM' } },
    { Country: { Name: 'Canada' }, Code: { ID: 'CA' } },
    { Country: { Name: 'Cameroon' }, Code: { ID: 'CM' } },
    { Country: { Name: 'Denmark' }, Code: { ID: 'DK' } },
    { Country: { Name: 'France' }, Code: { ID: 'FR' } },
  ];
  let fields: Object = { text: 'Country.Name',value: 'Code.ID'};
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                   <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag country'></div>
                </td>
            </tr>
        </table>
        <MentionComponent target={mentionTarget} dataSource={countriesData} fields={fields} ></MentionComponent>
      </div>
    );
}

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

Binding remote data

The React Mention retrieves data from remote services using the DataManager component. Use the query property to fetch data from the database and bind it to the React Mention.

OData v4 adaptor - Binding OData v4 service

The ODataV4 is an improved version of OData protocols, and the DataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation. To bind OData v4 service, use the ODataV4Adaptor.

The following sample displays the first 6 contacts from Customers table of the Northwind Data Service.

[Class-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    fields = { text: 'ContactName', value: 'CustomerID' };
    render() {
        return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

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

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
          url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
          adaptor: new ODataV4Adaptor,
          crossDomain: true
      });
  private query:Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
  private fields:Object =  { text: 'ContactName', value: 'CustomerID' };

  public render() {
    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user' ></div>
                </td>
            </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
    let query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
    let fields = { text: 'ContactName', value: 'CustomerID' };
    return (<div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user'></div>
                </td>
            </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { DataManager, ODataV4Adaptor, Query } from '@syncfusion/ej2-data';

function App () {

let mentionTarget: string = '#mentionElement';
let dataSource: DataManager = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/',
        adaptor: new ODataV4Adaptor,
        crossDomain: true
    });
let query:Query = new Query().from('Customers').select(['ContactName', 'CustomerID']).take(6);
let fields:Object =  { text: 'ContactName', value: 'CustomerID' };

    return (
      <div id='mention_default'>
        <table>
            <tr>
                <td>
                    <label id="comment">Comments</label>
                    <div id="mentionElement" placeholder='Type @ and tag user' ></div>
                </td>
            </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} popupWidth={'250px'}></MentionComponent>
      </div>
    );
}

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

Web API adaptor

You can use WebApiAdaptor to bind mention with Web API created using OData endpoint.

[Class-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
export default class App extends React.Component {
    mentionTarget = '#mentionElement';
    dataSource = new DataManager({
        url: 'https://services.syncfusion.com/react/production/api/Employees',
        adaptor: new WebApiAdaptor(),
        crossDomain: true
    });
    query = new Query().select(['FirstName', 'EmployeeID']).take(7).requiresCount();
    fields = { text: 'FirstName', value: 'EmployeeID' };
    render() {
        return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} popupWidth={'250px'}></MentionComponent>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

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

  private mentionTarget: string = '#mentionElement';
  private dataSource: DataManager = new DataManager({
          url: 'https://services.syncfusion.com/react/production/api/Employees',
          adaptor: new WebApiAdaptor(),
          crossDomain: true
      });
  private query:Query = new Query().select(['FirstName', 'EmployeeID']).take(7).requiresCount();
  private fields:Object = { text: 'FirstName', value: 'EmployeeID' };
  
  public render() {
    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={this.dataSource} target={this.mentionTarget} fields={this.fields} query={this.query} popupWidth={'250px'}></MentionComponent>
      </div>
    );
  }
}

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

[Functional-component]

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
function App() {
    let mentionTarget = '#mentionElement';
    let dataSource = new DataManager({
        url: 'https://services.syncfusion.com/react/production/api/Employees',
        adaptor: new WebApiAdaptor(),
        crossDomain: true
    });
    let query = new Query().select(['FirstName', 'EmployeeID']).take(7).requiresCount();
    let fields = { text: 'FirstName', value: 'EmployeeID' };
    return (<div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user'></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} popupWidth={'250px'}></MentionComponent>
      </div>);
}
ReactDOM.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { MentionComponent } from '@syncfusion/ej2-react-dropdowns';
import { Query, DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

function App(){
  let mentionTarget: string = '#mentionElement';
  let dataSource: DataManager = new DataManager({
          url: 'https://services.syncfusion.com/react/production/api/Employees',
          adaptor: new WebApiAdaptor(),
          crossDomain: true
      });
  let query:Query = new Query().select(['FirstName', 'EmployeeID']).take(7).requiresCount();
  let fields:Object = { text: 'FirstName', value: 'EmployeeID' };

    return (
      <div id='mention_default'>
        <table>
          <tr>
            <td>
              <label id="comment">Comments</label>
              <div id="mentionElement" placeholder='Type @ and tag user' ></div>
            </td>
          </tr>
        </table>
        <MentionComponent dataSource={dataSource} target={mentionTarget} fields={fields} query={query} popupWidth={'250px'}></MentionComponent>
      </div>
    );
}

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

See Also