How to display multiple selected values from a dropdown in React

Question

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.

you are passing value prop, whic will assign the value, instead you need to pass options prop which lists all choices for the select. You can refer getting started code in the docs — Adithya
– Adithya, Commented Dec 23, 2020 at 5:59

Tholle · Accepted Answer · 2020-12-23 06:03:39Z

3

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;

edited Dec 23, 2020 at 6:03

answered Dec 23, 2020 at 5:55

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to display multiple selected values from a dropdown in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related