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> ); } }

Vikky · Accepted Answer · 2018-06-15 14:07:18Z

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

Thank you so much! Your examples and explanations were very clear, so I really appreciate it! Helps me learn a lot better =)

Shahnad S · Accepted Answer · 2020-12-29 06:13:28Z

it could be solve by using custom styling in listbox props . plz refer my code .

 <Autocomplete key={`${filterKey}-township`} onChange={onAutocompleteChange} disableClearable multiple fullWidth limitTags={1} value={value} disableCloseOnSelect={true} size="small" id="township" options={townships} getOptionLabel={(option) => option.Township} ListboxProps={{ style: { position: "absolute", top: 10, bottom: 0, right: 0, left: 0, height:300, width: "100%", overflowY: "auto", backgroundColor: "white", }, }} renderInput={(params) => ( <TextField {...params} variant="standard" label="Township" onKeyDown={handleKeyDown} /> )} renderOption={(option, { selected }) => ( <React.Fragment> <Checkbox size="small" icon={icon} checkedIcon={checkedIcon} checked={selected} /> <Typography variant="body2">{option.Township}</Typography> </React.Fragment> )} />

Collectives™ on Stack Overflow

material-ui Select Box not showing selection

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related