Implement Country Dropdown In React Js

In this article, we will implement react-country-dropdown in react js.

First, we should install react-country-dropdown in our application

npm install --save react-country-dropdown

Import this package into our application

import React from 'react';  
import CountryDropdown from 'country-dropdown-with-flags-for-react';

Below you can see how to use react-otp-input in our application

import './App.css';     
import React from 'react';  
import CountryDropdown from 'country-dropdown-with-flags-for-react';  

function App() {    
  return (  
    	<CountryDropdown  id="UNIQUE_ID" className='YOUR_CSS_CLASS' preferredCountries={['gb', 'us']}  value="" handleChange={e => console.log(e.target.value)}></CountryDropdown>   
  );    
}   

export default App;

Here is a list of props you can give the component.

className
you can pass classname

value
the attribute’s value is either set or returned

handleChange
When the value of an element changes, the onchange event takes place.

You can see below the output