CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
ScalaBoy
ScalaBoy

Reputation: 3392

How can I sort drop-down menu items alphabetically?

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>

Upvotes: 3

Views: 8552

Answers (4)

Vikash Sadangi
Vikash Sadangi

Reputation: 57

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

Upvotes: 1

rogerdossantos
rogerdossantos

Reputation: 191

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 (i.e. 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...

Upvotes: 1

Hubi
Hubi

Reputation: 104

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.

Upvotes: 1

Nemer
Nemer

Reputation: 687

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

Upvotes: 5

Related Questions