Install react-select package
npm install react-select
C:\reactdev\myreactdev>npm install react-select
import Select from 'react-select';
1 2 3 4 5 6 7 8 9 | //src/index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( <App />, document.getElementById('root')) |
1 2 3 4 5 6 7 8 9 10 11 12 | //public/index.html<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>ReactJS </title> </head> <body> <div id="root"></div></body></html> |
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 48 49 50 51 52 53 54 55 56 57 58 59 | //src/App.jsimport React, { useState } from 'react';import Select from 'react-select';function App() { const data = [ { value: 1, label: "Python" }, { value: 2, label: "Swift" }, { value: 3, label: "Javascript" }, { value: 4, label: "PHP" }, { value: 5, label: "C#" }, { value: 6, label: "Go" } ]; const [selectedOption, setSelectedOption] = useState(null); // handle onChange event of the dropdown const handleChange = e => { setSelectedOption(e); } return ( <div className="App"> <b>MultiSelect Dropdown</b><br /> <Select isMulti placeholder="Select Option" value={selectedOption} options={data} // list of the data onChange={handleChange} // assign onChange function /> {selectedOption && <div style={{ marginTop: 20, lineHeight: '25px' }}> <b>Selected Options</b><br /> <pre>{JSON.stringify(selectedOption, null, 2)}</pre> </div>} </div> );}export default App; |
