React-select: Input field does not show selected value

[futuregerald]

Hey, I tried stack overflow but haven't had any luck there yet.

When I select a country the input isn't updating to show it. I can console log the value so I know the onChange is updating it.

 this.state = {
        countrySelection: "",      
        countryListFormatted: [
            {Value: "France", label: "France"}, 
            {Value: "Germany", label: "Germany"}, 
            {Value: "Greece", label: "Greece"},
            {Value: "Turkey", label: "Turkey"},
            {Value: "Italy", label: "Italy"},
            {Value: "Netherlands", label: "Netherlands"},
            {Value: "Portugal", label: "Portugal"},
            {Value: "Spain", label: "Spain"},
            {Value: "Switzerland", label: "Switzerland"},
            {Value: "United Kingdom", label: "United Kingdom"},
            {Value: "United States of America", label: "United States of America"}
        }

I'm not showing the entire page, but below is my onChange handler:

onSelectCountry(val){
    this.setState({countrySelection: val.Value})
    console.log(val)
}

And the action Select component:

    <Select
           searchable={true}
           style={{border: "none", boxShadow: "none", highlight: "none"}}
           placeholder="Country"
           name="country-selection"
           value={this.state.countrySelection}
           options={this.state.countryListFormatted}
           onChange={this.onSelectCountry.bind(this)}
     />

The dropdown has options available and I can select them and the console log will log the value I select. I have another console log logging state and thats logging the right state. I just don't know why the input doesn't show the option I select.

[jozcar]

Hi There, I was having a similar issue, I did exactly what you did on the onSelectCountry function. I then noticed that you are actually passing a full object, and that the react-select component is grabbing the object pass in the onSelectCountry and display it. below is part of my code.

in my case, I am using DisplayName to be value that is being pull. I hope it helps.

onChange(value) {

    this.setState({
        value: value 
    });
}
render() {
    const AsyncComponent = this.state.creatable
        ? Select.AsyncCreatable
        : Select.Async;

    return (
        <div className="section">
            <h3 className="section-heading">{this.props.label}</h3>
            <AsyncComponent
                multi={true} value={this.state.value}
                onChange={this.onChange}
                onValueClick={this.gotoUser} valueKey="DisplayName" labelKey="DisplayName"
                loadOptions={this.getUsers}
                backspaceRemoves={this.state.backspaceRemoves} />

            <br/>
            <StaffList staff={this.state.value}/>

        </div>

[gwyneplaine]

@futuregerald the value prop by default has an expected shape of

{ value: string | number, label: string }

Since the onChange prop is being passed the entire value object, the following line

this.setState({ countrySelection: val.Value })

should instead be

this.setState({ countrySelection: val })

[shorif2000]

i have tried this but it is not working for me

[babirali]

Hi,

I want to select value rather than whole object for saving only value in database and when i get back that value from database so i want to show selected value based on value from database.

That's the issue i am facing and can't find any solution.
So how can i do that.
Please help

[Raphaww]

@babirali did you find a solution?

[babirali]

@Raphaww i didn't find any solution according to my requirement but
I worked around by introduce new field in my object and and assign value of that object to original object key like this

onchange(object,field) {
   object['newField'] = object;  // bind this key to select input
   object['existingField']  = object.value // update this field to get only value of that selected object to save
}

when i get back that value from database i used filter function to create same object['newField'] like bellow

object['newField'] = dropdownData.filter((row)=> row.value == object.existingField );

Hope this will help you out.

Please ignore my English

[FazelMahdi]

i solved this problem here:
https://github.com/JedWatson/react-select/issues/2674#issuecomment-478596651

[musmanrao1994]

Hi,

you can also do this:

value={{label: this.state.selectedValue, value: this.state.selectedValue} }

Thank you!

[wouldBeNerd]

in the end I solved it by not using the value property at all. The onChange event still sets the underlying state. And the defaultValue (index number) sets the initial value, you can use the index to set the state to reflect the correct value. After this the select will display the option you select and still set the state onChange.

<select 
   onChange = {(e) => this.set_cloth_shape( {...SHAPES[ e.target.value ]} ) }
   defaultValue = { 4 } 
   placeholder = { "Select a shape" }
>
    {SHAPES.map( (shape, i )=> 
        <option key={`oS_shape${i}`} value={ i } >{`${shape.name}`}</option>
    )}
</select>

in my case i used {...SHAPES[ e.target.value ]} because i want the value to be a clone of the object.