material-ui Select Box not showing selection

Question

I have a material-ui select box that is populated with a state variable. No matter what I have tried, I cannot get the value to actually show when I select an option. Can anyone tell me why? It keeps just giving me a blank bar. I even took an example from another code sandbox and copied it almost exactly. One thing I did notice is that my event.target.value is always undefined, and I am not sure why. So I just use value, instead, in my handleChange function. Any help is greatly appreciated! This has been driving me crazy.

Code Sandbox: https://codesandbox.io/s/jnyq16279v

Code:

import React from 'react';
import MenuItem from 'material-ui/MenuItem';
import Select from 'material-ui/SelectField';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';

export default class KKSelect extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            selectOptions: [
                {
                    value: "Image",
                    id: "1"
                },
                {
                    value: "Integer",
                    id: "2"
                },
                {
                    value: "Decimal",
                    id: "3"
                },
                {
                    value: "Boolean",
                    id: "4"
                },
                {
                    value: "Text",
                    id: "5"
                }
            ],
            selectedValue: ""
        };
    }

    renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

    handleChange = (event, value) => {
        this.setState({ selectedValue: value });
    };

    render() {
        return (
            <MuiThemeProvider>

                <Select
                    value={this.state.selectedValue}
                    onChange={this.handleChange}
                >
                    {this.renderSelectOptions()}
                </Select>

            </MuiThemeProvider>
        );
    }
}

Answer 1

First of all, you are using material-ui version 0.20.1 - docs for that version is here: https://v0.material-ui.com/#/components/select-field, but it's recommended to use v1 (https://material-ui.com/getting-started/installation/).

For version 0.20.1, there are few problems with your code:

First: renderSelectOptions: {dt.value} should be assigned to MenuItem primaryText

renderSelectOptions = () => {
        return this.state.selectOptions.map((dt, i) => {
            return (
                <MenuItem key={i} value={dt.id}>
                    {dt.value}
                </MenuItem>
            );
        });
    }

like this:

renderSelectOptions = () => {
    return this.state.selectOptions.map((dt, i) => (
      <MenuItem key={dt.id} value={dt.id} primaryText={dt.value} />
    ));
  };

And second - handle change has event, index and value arguments, so your value is acctually index - not value.

handleChange = (event, value) => {
    this.setState({ selectedValue: value });
};

Should be:

  handleChange = (event, index, value) => {
    this.setState({ selectedValue: value });
  };

Check out working version for material-ui version 0.20.1 here: https://codesandbox.io/s/9q3v1746jy

P.S. If you are using material-ui version 1.2.1, I made working example for that version too, you can check it out here: https://codesandbox.io/s/jjvrnokkv3