将所选选项显示为选择下拉列表中的第一个选项？

Question

I am using react-select to show a list of users in a dropdown. I want it to always show the selected element as the first element in the list. Is there native support for this?

Example:

In the following image, since Green is selected, I want Green to appear at the top of the list before Ocean

Answer 1

You can pass an initialize callback to useState to sort the options array for the first time and put the defaultValue on top:

const defaultValue = initialOptions[5];
const [options] = React.useState(() =>
  initialOptions.sort((a, b) => {
    if (a === defaultValue) return -1;
    if (b === defaultValue) return 1;
    return 0;
  })
);

return <Select defaultValue={defaultValue} name="colors" options={options} />;

Answer 2

Try this Code :

  const [options, setOptions] = useState([
    { label: "Blue", value: "Blue" },
    { label: "Red", value: "Red" },
    { label: "Yellow", value: "Yellow" },
    { label: "Green", value: "Green" },
    { label: "Pink", value: "Pink" },
    { label: "White", value: "White" },
    { label: "Brown", value: "Brown" }
  ]);
  const [value, setValue] = useState("Select");
  function handler(e) {
    setValue(e);
    let newOptions = [];
    newOptions.push({ label: e, value: e });
    for (let i in options) {
      if (options[i].value !== e) {
        newOptions.push(options[i]);
      }
    }
    setOptions(newOptions);
  }
  return (
    <div className="App">
      <Select
        name="colors"
        defaultValue={value}
        options={options}
        onChange={(e) => handler(e.value)}
      />
    </div>
  );

Click this link to view demo