render(){

    let { classes } = this.props;

    let list = classes.map((item, index) => {
      return (
        <option >{item}</option>
      )
    })


    return(
      <div className="filter-bar">

        <form className="sort-form">
          <div className="classSelect">
            <span>select class</span>
              <select name="classSelect" onChange={this.handleClassChange}}>
                <option selected="selected"  >Please choose class</option>
                {list}
              </select>
          </div>
        </form>
      </div>
    )
  }
};

i want to map over an array and use each element as options in select dropdown, and also have an extra blank option which defaults until dropdown is clicked.

at the moment, the extra i have is available in the list, but default is always first element from array, whereas i want the default to be "Please choose your class"

can somebody explain?

  render(){

    let { classes } = this.props;

    let list = classes.map((item, index) => {
      return (
        <option >{item}</option>
      )
    })


    return(
      <div className="filter-bar">

        <form className="sort-form">
          <div className="classSelect">
            <span>select class</span>
              <select name="classSelect" onChange={this.handleClassChange}}>
                <option selected="selected"  >Please choose class</option>
                {list}
              </select>
          </div>
        </form>
      </div>
    )
  }
};

i want to map over an array and use each element as options in select dropdown, and also have an extra blank option which defaults until dropdown is clicked.

at the moment, the extra i have is available in the list, but default is always first element from array, whereas i want the default to be "Please choose your class"

can somebody explain?

• javascript
• html
• reactjs
• jsx
• html-select

Share Improve this question Follow asked Oct 29, 2019 at 13:31 Theo WrightTheo Wright 12322 silver badges1111 bronze badges 1

• assign a value to the default option and use this value as initial state – Dupocas Commented Oct 29, 2019 at 13:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

  render(){

const classes = [
  'Lorem',
  'Ipsum',
  'dolor',
  'Sit',
  'ames'
]

let list = classes.map((item, index) => {
  return (
    <option >{item}</option>
  )
})


return(
  <div className="filter-bar">
    <form className="sort-form">
      <div className="classSelect">
        <span>select class</span>
          <select name="classSelect" onChange={this.handleClassChange.bind(this)} defaultValue="none">
            <option value="none" disabled hidden> 
            </option> 
            {list}
          </select>
      </div>
    </form>
  </div>
)

You can use a disabled and hidden <option> with value "none". Instead of using the selected attribute, you should then use defaultValue="none" on the parent <select> to conform with modern react requirements.