Question

0

71

Vistas

Using react-select with an array of plain strings as options

I'm trying to use the react-select widget and pass a simple array of strings to it as the list of options instead of the default {value, label} objects. I have already successfully configured react-select to use objects with different properties than the default, so I assumed that configuring it for plain strings would simply work. But it doesn't, no matter which item I select the visible selection in the widget remains always empty.

I'm using react-select 4.3.1, and the following is a simplified example that exhibits the behaviour I've seen:

import React from "react";
import Select from "react-select";

const options = [
  { value: "chocolate", label: "Chocolate" },
  { value: "strawberry", label: "Strawberry" },
  { value: "vanilla", label: "Vanilla" }
];

const optionsStringsOnly = ["Chocolate", "Strawberry", "Vanilla"];

const MyComponent = () => <Select options={options} />;

const MyComponent2 = () => (
  <Select
    options={optionsStringsOnly}
    getOptionLabel={(x) => x}
    getOptionValue={(x) => x}
  />
);

The MyComponent version is from the react-select examples, and works as expected. The Mycomponent2 version does not work, and I don't understand why. I have successfully used the getOptionLabel and getOptionValue props to use objects with a different shape, but for plain strings this simply does not work.

I know there are other questions about using plain strings with react-select, but those assume that simply converting the options to {value,label} objects before passing them to react-select is acceptable. I want to avoid that as that would require reconverting the values later, which would be really annoying in my case. I want to pass in plain strings and get plain strings out of the react-select widget again.

What am I doing wrong here? How can I use plain strings as options with react-select?

7 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-12T05:12:33.902Z

Most people use state for value, in conjunction with an onChange handler for controlling it. By your comments, it appears that you are just looking for a form field with the value in it for a typical form POST scenario, as opposed to handling a composed JS object.

If you provide the mapping, and a name prop, you may get exactly what you need. By doing this:

const MyComponent2 = () => {
  const options = optionsStringsOnly.map(it => ({value: it, label:it}));
  return <Select name="foo_select" options={options} />;
};

When a selection is made, that value is then applied to the hidden form field with the name supplied. If you were to inspect the source in the browser you would see:

<input name="foo_select" type="hidden" value="Chocolate">

The name prop is critical here, as that's what tells React-Select to include the hidden field in the first place.

The downside to doing it this way is that you have no way of programmatically controlling your field value. You could set the value of the hidden field, but it would not automatically update the display.