How To Multiselect From DropDown In ReactJS Using react-select

In this article, we will learn how to use multi-select using react-select in React.

Now, let’s first create a React application with the following command.

• npx create-react-app reactSelect

Now install react-select using the following command.

• npm install react-select –save

My page will look like this

import React from 'react';
import Select from 'react-select';
import makeAnimated from 'react-select/animated';

const fruits = [
    { title: 'Apple' },
    { title: 'Mango' },
    { title: 'Banana' },
    { title: 'Orange' },
    { title: 'Grapes' },
    { title: "Pineapple" },
    { title: 'Pulp Fiction' },
    { title: 'Pomegranate' },
    { title: 'Avocado' },
    { title: 'Coconut' },
    { title: 'Watermelon' },
    { title: 'Papaya' },
    { title: 'Dragonfruit' },
    { title: 'Strawberry' },
    { title: 'Blueberry' },
    { title: "Cherry" }
];

const animatedComponents = makeAnimated();

export default function AnimatedMulti() {
    return (
        <Select
            closeMenuOnSelect={false}
            components={animatedComponents}
            defaultValue={[fruits[4], fruits[5]]}
            isMulti
            options={fruits}
        />
    );
}

Output: