CODEWITHSUNDEEP
reactjsdrop-down-menuhtml-selectmulti-select
N D
N D

Reputation: 67

How to display multiple selected values from a dropdown in React

I'm new to React and I wanted to create a dropdown which can select multiple values. For that I used the react-select plugin. In my React dev tool the selected values are getting stored but I'm not able to display all the selected values. Any help is highly appreciated. TIA

import React, { useState } from "react";
import Select from 'react-select'

const options = [
    { value: 'React', label: 'React' },
    { value: 'Vue', label: 'Vue' },
    { value: 'Angular', label: 'Angular' },
    { value: 'Java', label: 'Java' },
  ]

    const [skills, setSkills] = useState([]);

    const handleChange = (skill) => {
        setSkills({skill})
        console.log("skills", skill);
    }
    
    return (
        <>
           <h2>Please select all your skills</h2>
             <form>
                 <Select 
                    options={options} 
                    onChange={handleChange}
                    isMulti={true}
                    value={value}
                 />
                <button>Next</button> 
            </form>

        </>
    )
}

export default UserSkills;

When I'm commenting isMulti prop, I'm getting that one selected value, but I'm not getting anything with isMulti prop.

Upvotes: 1

Views: 9796

Answers (1)

Tholle
Tholle

Reputation: 112777

You are controlling the Select component by giving it a value, and since you are not updating value in the handleChange function it will not be updated.

You could use the skills array as value instead and it will update as expected.

CodeSandbox

const options = [
  { value: "React", label: "React" },
  { value: "Vue", label: "Vue" },
  { value: "Angular", label: "Angular" },
  { value: "Java", label: "Java" }
];

function UserSkills() {
  const [skills, setSkills] = useState([]);

  const handleChange = (skills) => {
    setSkills(skills || []);
  };

  return (
    <>
      <h2>Please select all your skills</h2>
      <form>
        <Select
          options={options}
          onChange={handleChange}
          value={skills}
          isMulti
        />
        <button>Next</button>
      </form>
    </>
  );
}

export default UserSkills;

Upvotes: 2

Related Questions