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

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



You can also read Autocomplete Example Using React.

React Select Example Using Material UI

This tutorial using react-select and material-ui MenuItem component.We will create dataService file to fetch countries data.The countries data will bind with 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 command line.We can create app using below command –



create-react-app new react-select-example



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

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 1 2 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 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 <code>getCountry()</code> method returns the country data in array of objects. 1 2 3 4 5 6 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 < code > getCountry ( ) < / code > 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 => { this.setState({ selected: event.target.value, name: event.target.name}); }; renderOptions() { return this.state.data.map((dt, i) => { //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> ); } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 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 = > { this . setState ( { selected : event . target . value , name : event . target . name } ) ; } ; renderOptions ( ) { return this . state . data . map ( ( dt , i ) = > { //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 use material select and MenuItem component and imported here.We have defined constructor method that initialize select options and selected value.

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

How To Add Css Styles in React

I am adding below css class into app.js file.The class have 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; } 1 2 3 4 5 6 7 8 9 . div - root { padding : 10px 50px ; } . width50 { width : 150px ; } #root { padding : 50px ; }

Now, Run react application using below command –

npm start