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.