React-select for showing select menu - You need to know How to use it properly?

React-select for showing select menu – You need to know How to use it properly?

Post author:ajayverma128
Post published:November 29, 2023
Post category:Frontend / React.js

React-select is one of the popular plugin for showing the select menu i.e dropdown list.

If you’re not aware about the <select> element in the html, please visit Select element MDN to refresh the memory.

I was developing one react application where i needed to show a dropdown list which should have the following features –

searchable dropdown list
selected item can be cleared and it should be configurable
if the dropdown is open, clicking anywhere outside should close the dropdown
select dropdown should be allowed to styled separately

Implementing this feature along with unit-testing would have taken lots of time, luckily we have react-select which offers the same set of functionality and even more.

While using it, I have seen one problem, there is no single reference on internet which shows how to use it in minimal code. Official documentation also contains lots of example but they offer usage which looks complex.

In this post, we are going to create a simple select menu which shows a list of fruits using react-select.

React application with react-select

let me show you the final result of what we are building –

To build it you can create the react app locally by using the following commands in terminal –

1. npx create-react-app react-select-menu (Note: react-select-menu is the project name, you can take any name here.)

2. install react-select npm packages, npm i react-select

Now, lets create the data.js file inside the src/ folder. This file will contains the dropdown list data which react-select accepts.

				
					// data.js

const data = [
    {label: 'Mango', value: 'mango'},
    {label: 'Apple', value: 'apple'},
    {label: 'Banana', value: 'banana'},
    {label: 'Grape', value: 'grape'},
    {label: 'Orange', value: 'orange'}
];

export default data;

Please note that, Select component from react-select accepts the dropdown list that should be an array of objects. If you just have the array of strings, it won’t work.

That is why the fruit array is an array of objects. Now, lets see the App.js file.

				
					// App.js

import { useState } from "react";
import Select from "react-select";
import data from './data';

const App = () => {
  const [favFruit, setFavFruit] = useState('');

  const handleChange = (e) => {
    console.log(e);
    setFavFruit(() => e?.value || '');
  };

  return (
    <>
      <h1>Searchable Select menu</h1>
      <Select
        placeholder="Select your fav fruit"
        options={data}
        isSearchable
        isClearable
        name="fruit"
        onChange={handleChange}
      />

      {favFruit && <p>My favourite fruit is {favFruit} </p>}
    </>
  );
};

export default App;

In App.js, we have taken one state variable which is used to store the currently selected option.

In Select component, we are passing the following props –