CODEWITHSUNDEEP
javascriptreactjs
mstarluk
mstarluk

Reputation: 45

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

Upvotes: 1

Views: 2060

Answers (2)

Hritik Sharma
Hritik Sharma

Reputation: 2010

You can read more about sort() and localeCompare().

You can do something like this :

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

Upvotes: 0

Abito Prakash
Abito Prakash

Reputation: 4770

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

Upvotes: 3

Related Questions