Input field does not show selected value

Viewed 3801

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.

2 Answers
Related