React-select does not show the selected value in the field

Question

i have a react-select component which i define like this:

<Select
            id="portf"
            options={opts}
            onChange={value => portfolioSelector(value)}
            placeholder="Select Portfolio"
          />

with opts = [{label: any, value:1}, {label:Two, value:2}].

The values when selected are stored in the state via portfolioSelector function. The problem is that when i select a value it wasn't show in the select field. My main component is this:

const PortfolioSelector = ({
  opts,
  portfolioSelector
}) => {
  if (opts) {
    return (
      <div className="portfolio select-box">
        <label htmlFor="selectBox" className="select-box__label">
        Portfolio
        </label>
        <div className="select-box__container">
          <Select
            id="portf"
            options={opts}
            onChange={value => portfolioSelector(value)}
            placeholder="Select Portfolio"
          />
        </div>
        <div className="separator" />
      </div>
    );
  }
  return (
    <div>Loading</div>
  );
};

Do you know why?

Solution 1

This is an alternative solution that i used.

Demo: https://codesandbox.io/s/github/mkaya95/React-Select_Set_Value_Example

import React, { useState } from "react";
import Select from "react-select";

export default function App() {
  const [selectedOption, setSelectedOption] = useState("none");
  const options = [
    { value: "none", label: "Empty" },
    { value: "left", label: "Open Left" },
    { value: "right", label: "Open Right" },
    {
      value: "tilt,left",
      label: "Tilf and Open Left"
    },
    {
      value: "tilt,right",
      label: "Tilf and Open Right"
    }
  ];
  const handleTypeSelect = e => {
    setSelectedOption(e.value);
  };

  return (
    <div>
      <Select
        options={options}
        onChange={handleTypeSelect}
        value={options.filter(function(option) {
          return option.value === selectedOption;
        })}
        label="Single select"
      />
    </div>
  );
}

Solution 2

<Select
options={this.props.locale}
onChange={this.selectCountryCode}
value={{label : this.state.selectedCountryLabel}}
/>

The value property expects the shape Array.

Solution 3

First thing is you are created the wrong array, if label: any or Two is string you have to add double quote. Look at this:

opts = [{label: "any", value:1}, {label:"Two", value:2}]

Second, You must remember the options in this case is opts is an array of object which have label and value, what the data you want to add to your state?

      <Select
        id="portf"
        options={opts}
        onChange={value => portfolioSelector(value.value /* or if you want to add label*/ value.label)}
        placeholder="Select Portfolio"
      />

Solution 4

The value is handled really bad, and it needs hacks like here, explained here.

Long story short; the value works differently. You'd expect

value={MY_VALUE}, but it works instead

value={{label: MY_VALUE}}.

Solution 5

You can simply put the value property as Selected.label

value={selectedOption.label}

View more solutions

Comments

[user7334203]

I want to add the value data in my state. But, this functionality is working correctly. The value is stored in my state. The problem is that i cant see the selected value in the portfolio input. I think your answer is not what i'm looking but thanks a lot :)

[Rahmat Aligos]

can you give me screeshot result of your select input.

[AP.]

No, value will be treated as a string automatically. This answer does not add anything meaningful to the answer, and if anything, should be written as a comment.

[Noor Muhammad]

Easiest solution of all. Thanks mate.

[arslion]

Not working for groupedOptions

[John Skoumbourdis]

Thanks @Daniel Danielecki for pointing me to the right direction. You really saved my day. Just a heads up my solution was this: <Select ... value={{label: permittedValues[value], value}} options={options}></Select> it seems that you will need to add the label AND the value as an object. Just the label as the value didn't work for me :(