So I am running into this issue where the ponent loads just fine, a dropdown appears, however it shows no label or value. When I click the option it shows a chosen box, but nothing in the box. Please see code below. I am using latest of React-Select for a multi select input and cannot find any documentation on how the array should be built for a multi select.

import React, { Component } from 'react';
import '../index.css';
import Select from "react-select";

export class Invite extends Component {

    constructor(props) {
        super(props);

        this.state = {
            multiValue: [],
            filterOptions: []
        };

        this.handleMultiChange = this.handleMultiChange.bind(this);
    }

    ponentDidMount = () => {
        let userList = [];
        let list = [];
        list = this.props.hub.users;
        for (var i = 0; i < list.length; i++) {
            userList.push([{label: list[i].userName, value: list[i].userName }]);
        }
        this.setState({ filterOptions: userList });
    }

    handleMultiChange(option) {
        this.setState(state => {
            return {
                multiValue: option
            };
        });
    }

    render() {

        return (<div className="invite">
            <Select
                name="Users"
                placeholder="Users"
                value={this.state.multiValue}
                options={this.state.filterOptions}
                onChange={this.handleMultiChange.bind(this)}
                isMulti
            />
        </div>);
    }
}

So I am running into this issue where the ponent loads just fine, a dropdown appears, however it shows no label or value. When I click the option it shows a chosen box, but nothing in the box. Please see code below. I am using latest of React-Select for a multi select input and cannot find any documentation on how the array should be built for a multi select.

import React, { Component } from 'react';
import '../index.css';
import Select from "react-select";

export class Invite extends Component {

    constructor(props) {
        super(props);

        this.state = {
            multiValue: [],
            filterOptions: []
        };

        this.handleMultiChange = this.handleMultiChange.bind(this);
    }

    ponentDidMount = () => {
        let userList = [];
        let list = [];
        list = this.props.hub.users;
        for (var i = 0; i < list.length; i++) {
            userList.push([{label: list[i].userName, value: list[i].userName }]);
        }
        this.setState({ filterOptions: userList });
    }

    handleMultiChange(option) {
        this.setState(state => {
            return {
                multiValue: option
            };
        });
    }

    render() {

        return (<div className="invite">
            <Select
                name="Users"
                placeholder="Users"
                value={this.state.multiValue}
                options={this.state.filterOptions}
                onChange={this.handleMultiChange.bind(this)}
                isMulti
            />
        </div>);
    }
}

• javascript
• reactjs
• react-select

1 Answer 1

you did mistake in ponentDidMount userList should be an array of objects instead of array of arrays.

ponentDidMount = () => {
  let userList = [];
  let list = [];
  list = this.props.hub.users;
  for (var i = 0; i < list.length; i++) {
    userList.push({
      label: list[i].userName,
      value: list[i].userName
    });
  }
  this.setState({
    filterOptions: userList
  });
}

for more details visit documentation.