I have this code

<Dropdown
    id="city"
    placeholder="Select a city"
    options={this.state.cities}
    onChange={this.onChangeHandler}
    />;

this will display a dropdown showing the placeholder "Select a city".

What I am trying to do is, if this.state.cities only has one element, to set it as preselected. Otherwise keep showing the placeholder text and all the options underneath.

the library I am using is

thanks

I have this code

<Dropdown
    id="city"
    placeholder="Select a city"
    options={this.state.cities}
    onChange={this.onChangeHandler}
    />;

this will display a dropdown showing the placeholder "Select a city".

What I am trying to do is, if this.state.cities only has one element, to set it as preselected. Otherwise keep showing the placeholder text and all the options underneath.

the library I am using is https://www.npmjs./package/react-dropdown

thanks

• javascript
• reactjs

• can you share this.onChangeHandler method too? – Fatih Turgut Commented May 16, 2019 at 9:41
• provide value prop - conditionally initiated – xadm Commented May 16, 2019 at 9:44
• the onChangeHandler method does some things when you select an option. I need to preselect the option before the user even click on the control. Actually this is a good point because I didn't think that I need a button to submit the value if preselected. – user3174311 Commented May 16, 2019 at 9:45
• @user3174311 Where do you store current Dropdown value, also in state? Because I don't see any value prop of Dropdown in your example. Also you can initialize selected values in ponent state, base on cities length, like: this.state = { cities: cities; // came from somewhere, selectedCity: cities.length === 1 ? cities[0] : null } But this will work only for ponent initialization, so if you fetch cities from backend, you can do something like: <Dropdown id="city" value={this.state.selectedValue || (this.state.cities.length === 1? this.state.cities[0] : null)} /> – IfSoGirl Commented May 16, 2019 at 9:54
• You failed to specify the library that you are using – lomse Commented May 16, 2019 at 10:09

2 Answers 2

According to the documentation, the Dropdown ponent takes a value prop.

import Dropdown from 'react-dropdown'
import 'react-dropdown/style.css'

class App extends React.Component {
   constructor() {
     super();
      this.state={
        cities: ["New York", "San Francisco", "Seattle", "Washington DC"],
        selectedCity: ""
      }
   }

   handleSelectCity = (option)=> {
      const selectedCity = option.value
      this.setState({selectedCity});
   }

   render() {
      const {selectedCity, cities} = this.state;

      return (
        <Dropdown 
          options={cities} 
          onChange={this.handleSelectCity} 
          value={selectedCity} 
          placeholder="Select an option" 
        />
      )
   }
}

export default App;

In the Dropdown ponent you can do something like this

{(this.props.options.length > 1) ? <option>{this.props.placeholder}</option>: null}

Browser will automatically select the first option in the list.