So, i'm trying to add react-select component to my project. I'm using grouped options and trying to have the ability to select multiple options
This is my component code
class QueueFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
options: [
{
label: 'Partner',
options: [
{
value: {
id: 'ABCDSC',
value: 'Partner1'
},
label: 'Partner1'
},
{
value: {
id: 'ABCDSC',
value: 'Partner2'
},
label: 'Partner2'
}
]
},
{
label: 'Study',
options: [
{
value: {
id: 'ABCDSC123',
value: 'Study1'
},
label: 'Study1'
}
]
}
],
selectedFilters: []
};
this.fecthQueueFilters = this.fecthQueueFilters.bind(this);
this.onFilterChange = this.onFilterChange.bind(this);
this.applyFilter = this.applyFilter.bind(this);
}
componentDidMount(prevState, prevProps) {
if (prevProps.queueId !== this.props.queueId) {
this.fetchQueueFilters(this.props.queueId);
}
}
onFilterChange(selectedFilters) {
this.setState({ selectedFilters });
}
fecthQueueFilters(queueId) {
}
applyFilter() {
}
render() {
const groupStyles = {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
};
const groupBadgeStyles = {
backgroundColor: '#EBECF0',
borderRadius: '2em',
color: '#172B4D',
display: 'inline-block',
fontSize: 12,
fontWeight: 'normal',
lineHeight: '1',
minWidth: 1,
padding: '0.16666666666667em 0.5em',
textAlign: 'center',
};
const formatGroupLabel = data => (
<div style={groupStyles}>
<span>{data.label}</span>
<span style={groupBadgeStyles}>{data.options.length}</span>
</div>
);
const Input = (props) => {
if (props.isHidden) {
return <components.Input {...props} />;
}
return (
<div style={{ border: '1px dotted black' }}>
<components.Input {...props} />
</div>
);
};
return (
<Container fluid className="main-header">
<Row>
<Col xs="1">Queue Filters:</Col>
<Col auto>
<Select
options={this.state.options}
isMulti
isClearable
formatGroupLabel={formatGroupLabel}
components={{Input}}
closeMenuOnSelect={false}
value={this.state.selectedFilters}
onChange={this.onFilterChange}
/>
</Col>
<Col xs="1">
<Button type="button" onClick={this.applyFilter} color="success">
<Filter />
</Button>
</Col>
</Row>
</Container>
);
}
}
QueueFilter.propTypes = {
queueId: PropTypes.string
};
export default QueueFilter;But when I select multiple options, only 1 is shown in the select field
The console shows there's 2 options selected
And, well, there's this warning in the console
If I change the the options values to be simple strings instead of objects
this.state = {
options: [
{
label: 'Partner',
options: [
{
value: 'ABCDSC:Partner1',
label: 'Partner1'
},
{
value: 'ABCDSC:Partner2',
label: 'Partner2'
}
]
},
{
label: 'Study',
options: [
{
value: 'ABCDSC123:Study1',
label: 'Study1'
}
]
}
],
selectedFilters: []
};
Well, it works as expected, but I'd rather have the object values.
Any idea how to achieve this?
