Question 281831 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – react-select, options are not rendering, besides for first one, but it's not visible? and when it goes to my onSelectOption the whole array is going

I am getting an array of flavors from my backend.

This is my jsx:

<div className="mb-3">         
<Select options={flavorOptions} onChange={onSelectOption} value={flavor} />
</div>

The array is being formatted to the correct format needed for react-select, like this:

const flavorOptions =
        [
            flavors.map(f => {                
                return {
                    value: f, label: f
                }
            })
        ]

This is my onSelectOption function:

const onSelectOption = (option) => {
        const copy = {...order}
        copy.flavor = option.value
        setOrder(copy)
    }

This is the output

and when I click on that one option (that isn’t even visible), the first option shows up but when onChange calls the onSelectOption function the whole array gets sent in.

So really my question has three parts:

  1. Why is only one option showing up?
  2. Why isn’t it visible?
  3. Why is the whole array getting passed to the onSelectOption function, as opposed to just the selected value?

I tried adding these props – getOptionLabel={option => option.label} getOptionValue={option => option.value} to Select and got the same results.
I also tried this:

<Select>
   {flavorOptions.map(flavor => {
       <option key={flavor.label} value={flavor.value} > {flavor.label}</option>
   })}
</Select>

which resulted in getting the No options message.

If anyone has any idea what I might be doing wrong, I would greatly appreciate feedback.
I am very new to react, and programming in general so it could very well be a careless mistake.

Tags:

2

Answers


  1. 0

    Based on your code snippets, it seems that the issue lies in the way you’re formatting the flavorOptions array.

    Currently, you are wrapping the flavors.map() function inside an array, which results in a nested array. This is causing the Select component to receive an array as its options prop, instead of an array of objects.

    To fix this, you can remove the square brackets around flavors.map() so that the flavorOptions array is not nested:

    const flavorOptions = flavors.map(f => ({
  value: f,
  label: f
}));

    Regarding your questions:

    1. Only one option is showing up because the Select component expects an array of objects as the options prop. By fixing the flavorOptions array format as mentioned above, all options should appear.
    2. The visibility issue could be due to CSS or styling conflicts. Make sure the Select component is not being hidden or overlapped by other elements on the page.
    3. The whole array is getting passed to the onSelectOption function because the onChange event of the Select component is triggered whenever the selected option changes. To access the selected value, you can use option.value in your onSelectOption function, as you are currently doing.

    Here’s the updated code:

    <div className="mb-3">
  <Select options={flavorOptions} onChange={onSelectOption} value={flavor} />
</div>

const flavorOptions = flavors.map(f => ({
  value: f,
  label: f
}));

const onSelectOption = (option) => {
  const copy = { ...order };
  copy.flavor = option.value;
  setOrder(copy);
};

    Make sure to check for any other potential issues such as missing imports or incorrect variable values.

    Login or Signup to reply.
  2. 0

    Just remove the square brackets here:

    const flavorOptions =
            flavors.map(f => {                
                return {
                    value: f, label: f
                }
            })

    What you passed in was like [["apple", "banana"]] when you just need ["apple", "banana"]

    Stackblitz: https://stackblitz.com/edit/stackblitz-starters-wrswve?file=src%2FApp.tsx

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search