How to Create a React Dropdown Control in Your Web Application

One of the most common input types that users interact with online, dropdowns allow users to select from various items. Many organizations use dropdown menus to allow users to complete an online form accurately. They are used for choosing options such as selecting your country, language, or responding to a question where there are only a few possible responses. 

Besides being a default HTML element through the <select> element, plenty of open-source and third-party dropdown controls are available online; which one should you choose?

Thankfully, Wijmo has you covered with ComboBox, the best React dropdown control available. It's simple to implement, easy to customize and has an extensive list of features that allow you to easily integrate it into your other controls and components. 

In this article, we'll be outlining the following features of the ComboBox:

• Dropdown Implementation
• Styling the ComboBox Control
• Customizing the Dropdown Elements
• Integrating the Dropdown Control with other Components

If you'd like to download this project for yourself, you can find it here. Now, let's get to work!

Dropdown Implementation

Before we implement the Wijmo's React dropdown, ComboBox, we'll need to install Wijmo's components library. Inside your React application, run the following command:

npm i @grapecity/wijmo.react.all

This will install all of the Wijmo files required for its set of React controls.

Next, we'll need to include Wijmo's styling and the ComboBox module. Inside of the App.js file, include the following:

import * as wjCore from '@grapecity/wijmo';
import * as wjcGrid from '@grapecity/wijmo.react.grid';
import * as wjcInput from '@grapecity/wijmo.react.input';

And for the styles, including the following at the top of your application's index.css file:

@import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';

Now the application is set up to allow us to create a ComboBox control. Inside our App.js file, we'll retrieve some dummy data to populate our dropdown, as well as a CollectionView to hold our data:

function App() {
  const [cv, setCollectionView] = useState(['US', 'UK', 'China', 'Russia', 'Germany', 'India', 'Italy', 'Canada']);
}

We're just creating an array of countries, which we'll give the user the ability to select from inside of the markup:

<h2>ComboBox Blog</h2>
<wjcInput.ComboBox itemsSource={cv}></wjcInput.ComboBox>

Now we're good to run our application to see the ComboBox in action:

As you can see, Wijmo's React dropdown neatly displays all our data. Next, it's time to customize the look of the ComboBox.

Styling the ComboBox Control

Wijmo's ComboBox, along with its other controls, is highly customizable. We will modify the dropdown for this sample to have a dark-mode look.

One thing to point out is that when customizing some of Wijmo's core CSS classes, these changes need to be implemented inside the index.css file to take effect.

.wj-control .wj-input-group .wj-form-control {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
    font-weight: bold;
    padding: 10px 16px 8px;
    font-size: 16px;
}
 
.wj-control .wj-input-group .wj-input-group-btn {
    background: hsl(0, 0%, 15%);
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover {
    background: hsl(0, 0%, 30%);
    transition: .4s;
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover .wj-glyph-down {
    color: hsl(0, 0%, 85%);
    transition: .4s;
}
 
.wj-combobox {
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
 
.wj-listbox-item {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
}
 
.wj-listbox-item.wj-state-selected {
    background: hsl(0, 0%, 30%);
}
 
.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn {
    border-left: 1px solid hsl(0, 0%, 70%);
}
 
.combo-dropdown > .wj-listbox-item:hover {
    cursor: pointer;
    background: hsl(0, 0%, 30%) !important;
    transition: .3s;
  }
 
.wj-glyph-down {
    color: hsl(0, 0%, 70%);
}

There's a fair amount of code here, but all we're doing is modifying the size and color of the ComboBox. We change all the white in the dropdown to black, darken the grey hover effect when users hover over list elements, and add some padding to the control to give it more space. When we run the application, we'll see the following:

Customizing the Dropdown Elements

Now, loading in an array is relatively basic. In most scenarios, you won't be creating your data in code but receiving it from a database, and most of the time, it won't be an array of strings but an array of objects that you'll be receiving. The nice thing about this, however, is that ComboBox makes it easy to add data from an API call, and even more, you can use this additional data to customize the dropdown elements of the ComboBox further.

The first thing we'll need to do is get the data from the data source. In this article, I'll be making a fetch request to an API, which will return some data on each country. To do this, we'll be including the useEffect method in the application and make a fetch request to our API. Inside the App.js file, make the following changes:

const [cv, setCollectionView] = useState(new wjCore.CollectionView([], {}));
useEffect(() => {
  fetch('https://mocki.io/v1/eaf8d0a8-052c-4d2a-b105-da40855634fa').then(response => response.json()).then(data => cv.sourceCollection = data);
})

Instead of just assigning an array of data to our state, we’re creating a CollectionView object and assigning an empty array to it. We’re then using the useEffect() method to assign the data we retrieve to the CollectionView. When we run the application now, we see the following:

As you can see, this isn't what we want to display. We're seeing this because we've dropped an object in as the data source for the dropdown, so it's just showing that each item in the list is an object. Thankfully, Wijmo's React dropdown makes it easy to tell the component what exactly we want to display. Inside the app.component.html file, we're going to add some properties to the ComboBox control:

<wjcInput.ComboBox displayMemberPath="country" headerPath="country" itemsSource={cv} dropDownCssClass="combo-dropdown"></wjcInput.ComboBox>

Here, we're setting two properties: displayMemberPath and headerPath. The displayMemberPath property tells the control which property of the object we want to display, and the headerPath will tell the ComboBox the property which property we want to display in the text box portion of the control. You usually only need to set displayMemberPath, but in this article, we're also modifying what we're displaying in the dropdown elements. That is where headerPath comes in. It allows you to decouple the display values of the dropdown elements and the display value of the input element.

Finally, we're going to add our template to the ComboBox. Wijmo allows you to create custom templates for many of its controls, which are used to override the default display text. Inside the App.js file, add the following code:

<wjcInput.ComboBox displayMemberPath="country" headerPath="country" itemsSource={cv} dropDownCssClass="combo-dropdown" wjItemTemplate={(context) => (
  <div className="item">
    <div className="itemHeader">
      <img src={context.item.flag} alt="" /><b>{context.item.country}</b>
    </div>
    Sales: <b>${context.item.sales}</b><br/>
    Expenses: <b>${context.item.expenses}</b>
  </div>
)}></wjcInput.ComboBox>

We're creating a wjItemTemplate, which will replace the default HTML used to generate each dropdown element. The context variable is used to hold the properties of each dropdown element, which means that we can use the same property names that our object uses when referencing those properties.

We're also going to add some CSS inside of the App.css file to clean up the look a little:

.item {
    margin: 2px;
}
 
.itemHeader {
    font-size: 16px;
    margin-bottom: 4px;
}

Now, when we run the application, we'll see the following:

Now we've got a dark-themed dropdown control, which displays each country's flag, name, and their current sales and expenses. Very nice! We're almost done. There's still one more thing that we need to do: tie the ComboBox to another control. We'll cover how to do that in the next section.

Integrating the Dropdown Control with other Components

The final step in this application is to tie Wijmo's React dropdown to another control, allowing them to work together. In this sample, we'll use Wijmo's FlexGrid control. First, we'll need to import the required module inside the App.js file:

import * as wjcGrid from '@grapecity/wijmo.react.grid';

Next, we'll add FlexGrid to the app.component.html file:

<wjcGrid.FlexGrid itemsSource={cv} selectionMode="Row">
  <wjcGrid.FlexGridColumn binding="country" header="Country" width="*"></wjcGrid.FlexGridColumn>
  <wjcGrid.FlexGridColumn binding="sales" header="Sales" width="*" format="c2"></wjcGrid.FlexGridColumn>
  <wjcGrid.FlexGridColumn binding="expenses" header="Expenses" width="*" format="c2"></wjcGrid.FlexGridColumn>
</wjcGrid.FlexGrid>

Most of this code isn't relevant to this article, but the one crucial thing that I will cover is that we're using the same data source for each of the controls: the dataSet, which is a CollectionView object. When we run the application, you'll see the following:

The CollectionView object is what allows us to tie the controls together. When two different controls use the same CollectionView, any changes made to one are reflected by another. In the case of the ComboBox and FlexGrid, when the user selects a different item from the dropdown, the grid's selection will change to match the same item. Also, if a user changes any of the cells in the FlexGrid, those changes will be reflected in the ComboBox.

To show this, we'll change "Greece" in the country column to "Mexico" and you'll see the following:

As you can see, the country name in the dropdown has changed from "Greece" to "Mexico" and the selected row in the grid has changed to match the selected item in the dropdown.

Conclusion

As you can see, you can build a very powerful and versatile React dropdown with Wijmo's ComboBox. This article scratches the surface of what you can do with the ComboBox; if you'd like more information, we've got demos, documentation, and API references for developers to use. You can find the finished application here if you'd like to download it.

If you're interested in seeing what more Wijmo has to offer, you can download the library here.

Happy coding!