react-select multiple options grouped have object as value

Question

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?

Answer 1

You can use the prop getOptionValue

<Select
  getOptionValue={option => option.value.value}