CODEWITHSUNDEEP
reactjsreact-select
Yash
Yash

Reputation: 919

Render selected item outside of input box for multi select of react-select library

How can we display the selected value just below the input box.

Use Case:

We are using multiple select of react-select , when we select the value from the select box , it comes inside the input box as selected. Can we have a method or something to get the selected values outside the input box (just below it)

Thanks in Advance!

Upvotes: 4

Views: 3271

Answers (2)

Richard Beattie
Richard Beattie

Reputation: 321

I recently had to do this for a project I'm working on and wrote up how I did it here. The gist is that you need a wrapper component

// SelectWrapper.js
import ReactSelect from 'react-select'

const SelectWrapper = (props) => {
    const { isMulti, value } = props;

    return (
        <div>
            {isMulti ? value.map((val) => <span>{val.label}</span>) : null}
            <Select {...props} controlShouldRenderValue={!isMulti} />
        </div>
    )
}

The very important part here is the controlShouldRenderValue prop which we disable when isMulti is true so the select dosn't show any selected values instead letting us take care of that

Upvotes: 3

lisdey89
lisdey89

Reputation: 222

I had a similar problem and I solved it creating a wrapper of react-select component and adding a state to my custom component. When the react-select changes I added the selected items to my component state and I show the in a custom div below, there you can add the styles that you want. Here an example of my approach: https://codesandbox.io/s/2kyy4998y

Hope this helps you.

Regards

Upvotes: 4

Related Questions