Is there any way to display options
in an alphabetical order in the drop-down menu of Material-UI ?
I know that arrays can be sorted simply using arr.sort()
. However, if I do const options = [...].sort()
, then I still see unsorted values in the drop-down menu.
const options = [
{label:"B",value:8033.86},
{label:"A",value:483.93},
{label:"Z",value:1246.3},
{label:"C",value:145.0},
{label:"E",value:244.5}
]
<Grid item xs={true}>
<FormControl
className={this.props.styles.formControl}
margin="normal">
<InputLabel shrink htmlFor="distanceTarget-label-placeholder">
Target:
</InputLabel>
<Select
onChange={(event) => this.props.handleChange("distanceTarget", event)}
value={this.props.state.distanceTarget}
input={<Input name="distanceTarget" id="distanceTarget-label-placeholder" />}
displayEmpty="true"
name="distanceTarget"
>
{options && options.length && options.map((option, i) => {
return <MenuItem value={option.value} key={i}>{option.label}</MenuItem>
})}
</Select>
</FormControl>
</Grid>
here a simple way to sort the array of objects and you can read the documentation
const options = [ {label:"B",value:8033.86}, {label:"A",value:483.93}, {label:"Z",value:1246.3}, {label:"C",value:145.0}, {label:"E",value:244.5} ] console.log(options.sort((a, b) => (a.label > b.label) ? 1 : -1))
Material-UI is about styles, not logic. First of all, you need to sort your options.
for (const item in options) {
console.log(options[item].label)
}
Its first steps. The second you should try yourself.
When you're dealing with an Array of Objects, you need to tell what determines which one comes first:
function sortAlphabeticallyAscending(a,b){
if(a.label < b.label) return -1;
else if (a.label > b.label) return 1;
else return 0;
}
options.sort(sortAlphabeticallyAscending);
basically, return -1 if you want to say that the index of a is lower than b (ie a comes first), return 1 if you want to say that b comes first, and 0 if you don't want to change the order
See the section compareFunction in the docs...
You have to define the sorting logic as your input array is an array of objects.
More info can be found here
const options = [ {label:"B",value:8033.86}, {label:"A",value:483.93}, {label:"Z",value:1246.3}, {label:"C",value:145.0}, {label:"E",value:244.5} ]; const objComparator = function(a, b) { if (a.label < b.label) { return -1; } if (a.label > b.label) { return 1; } return 0; }; options.sort(objComparator);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.