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>

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>

• javascript
• reactjs
• material-ui

4 Answers 4

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 es 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 (i.e. a es first), return 1 if you want to say that b es first, and 0 if you don't want to change the order

See the section pareFunction 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);