Сделав первый выбор <option>пустым после сопоставления через массив в JSX / React

Question

  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Имеется в списке, но по умолчанию это всегда первый элемент из массива, тогда как я хочу, чтобы по умолчанию было «Пожалуйста, выберите свой класс»

Может кто-нибудь объяснить?

Answer 1

  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)}>
            <option value="none" selected disabled hidden> 
            </option> 
            {list}
          </select>
      </div>
    </form>
  </div>
)

Как это?