React Select Example Using Material UI

Today, I will discuss about react select example Using material-ui. We will create a simple dropdown list of countries’ data. We will fetch country data from the service file.

The material-ui has many in-built useful components. I am using one of them to create a dynamic select box using react.

You can also read Autocomplete Example Using React.

This tutorial using react-select and material-ui MenuItem component. We will create dataService file to fetch countries data. The country’s data will bind with the menuitem component. We are rendering an Array of Data with map() function.

Create React Application Using CLI

Let’s create react application react-select-example using the command line. We can create an app using the below command –
create-react-app new react-select-example

Now, cd into the react-select-example folder.

Checkout Other tutorials:

Install React Dependencies Using npm

we will install material-ui and react-select dependency using npm cli. The following will use to install dependencies –

npm install react-select
npm install @material-ui/core

Create DataService File in ReactJs

Let’s create dataService.js file which is a data service file and added the below methods into this file –

export function getCountry() {
  return [
{name: 'Afghanistan', code: 'AF'},{name: 'Åland Islands', code: 'AX'},{name: 'Albania', code: 'AL'},{name: 'Algeria', code: 'DZ'},{name: 'American Samoa', code: 'AS'},{name: 'AndorrA', code: 'AD'},{name: 'Angola', code: 'AO'}, {name: 'Anguilla', code: 'AI'},{name: 'Antarctica', code: 'AQ'},{name: 'Antigua and Barbuda', code: 'AG'},{name: 'Argentina', code: 'AR'}, {name: 'Armenia', code: 'AM'},{name: 'Aruba', code: 'AW'}, {name: 'Australia', code: 'AU'},{name: 'Austria', code: 'AT'},{name: 'Azerbaijan', code: 'AZ'},{name: 'Bahamas', code: 'BS'}, {name: 'Bahrain', code: 'BH'},{name: 'Bangladesh', code: 'BD'}, {name: 'Barbados', code: 'BB'},{name: 'Belarus', code: 'BY'}, {name: 'Belgium', code: 'BE'}, {name: 'Belize', code: 'BZ'}, {name: 'Benin', code: 'BJ'}, {name: 'Bermuda', code: 'BM'},{name: 'Bhutan', code: 'BT'},{name: 'Bolivia', code: 'BO'},{name: 'Bosnia and Herzegovina', code: 'BA'},   {name: 'Botswana', code: 'BW'},   {name: 'Bouvet Island', code: 'BV'},   {name: 'Brazil', code: 'BR'},   {name: 'British Indian Ocean Territory', code: 'IO'},   {name: 'Brunei Darussalam', code: 'BN'},   {name: 'Bulgaria', code: 'BG'},   {name: 'Burkina Faso', code: 'BF'},   {name: 'Burundi', code: 'BI'},   {name: 'Cambodia', code: 'KH'},   {name: 'Cameroon', code: 'CM'},   {name: 'Canada', code: 'CA'},   {name: 'Cape Verde', code: 'CV'},{name: 'Cayman Islands', code: 'KY'},   {name: 'Central African Republic', code: 'CF'},   {name: 'Chad', code: 'TD'}]
}

The getCountry() method returns the country data in array of objects.

Create React Select Component Using Material UI

The app.js file will have select component code, We will import dataService.js file and use method to get options data.

import React from 'react';
import './App.css';
import { getCountry } from './dataService';
import {
  Select,
  MenuItem,
} from '@material-ui/core';

export default class SimpleSelect extends React.Component {
  constructor(props) {
      super(props);
      this.state = {
      data: getCountry(),
      selected: 'IN'

     };

     // this.handleChange1 = this.handleChange1.bind(this)
  }

  handleChange = event =&gt; {
    this.setState({ selected: event.target.value, name: event.target.name});
  };
renderOptions() {
     return this.state.data.map((dt, i) =&gt; {
      //console.log(dt);
       return (
           <menuitem label="Select a country" value="{dt.country_code}" key="{i}" name="{dt.country_name}">{dt.country_name}</menuitem>
         
       );
     });
    }
    render() {
      console.log(this.state.selected);
      return (

<div classname="padd50">
           <select classname="width50" value="{this.state.selected}" onchange="{this.handleChange}">
             {this.renderOptions()}
           </select>

<h3>Selected Country - {this.state.selected}</h3>

</div>

      );
    }
}

We have used material select and MenuItem components and imported them here. We have defined a constructor method that initializes select options and selected values.

There are two methods used here in this tutorial, The renderOptions() method used to create MenuItem and attached with select. The handleChange() method used to change the selected option on click of option by the user.

How To Add Css Styles in React

I am adding the below css class into the app.js file. The class has the main div width and select element width. You can control width and color from here.

.div-root {
  padding: 10px 50px;
}
.width50 {
  width:150px;
}
#root {
  padding: 50px;
}

Now, Run react application using the below command –
npm start

Browser will open 'http://localhost:3000', You will see a react select element with all countries options.

React Select Example Using Material UI | React Material UI Tutorial