javascriptreactjs

How to sort Option List in alphabetical order in ReactJS

Beginner at JavaScript and ReactJs. I'm trying to sort this list while displaying options on the front end.

<Select
  value={Reactivity}
  options={[
    { label: "Chicken", value: "Chicken" },              
    { label: "Rat", value: "Rat" },
    { label: "Dog", value:"Dog"},
    { label: "Pig", value:"Pig"},
  ]}
  placeholder="Reactivity"
  onChange={(v) => {
    setReactivity(v.map((vv) => vv));
  }}
  isClearable
  isMulti
/>

// Code to display and choose options

Solution

  • You can use Array.sort

    <Select
    value={Reactivity}
    options={[
        { label: "Chicken", value: "Chicken" },              
        { label: "Rat", value: "Rat" },
        { label: "Dog", value:"Dog"},
        { label: "Pig", value:"Pig"},
    ].sort((a, b) => a.label.localeCompare(b.label))}
    placeholder="Reactivity"
    onChange={(v) => {
        setReactivity(v.map((vv) => vv));
    }}
    isClearable
    isMulti
/>