Реакция - добавление опции по умолчанию при использовании карты в теге выбора

Question

Я узнал, что при использовании Select каждый элемент в раскрывающемся списке задается тегом Option.

Теперь у меня есть массив значений, который должен содержать раскрывающийся список -

a = ['hai','hello','what']

Так что я оптимизировал свой код, написав его следующим образом -

     <Select>  
          a.map(ele =>
        <Option value={ele}> ele </Option> )
     </Select>

Это сработало успешно. Но теперь я хочу добавить значение по умолчанию, которое будет отображаться при первом рендере. Я пытался сделать это -

<Select>
      <Option selected={true}> Choose from the list</Option
      a.map(ele =>
            <Option value={ele}> ele </Option> )
</Select>

Но это дает ошибку. Как правильно это сделать?

Answer 1

Вы можете попробовать это:

<Select name="select" id="select" >
    {
        a.map(ele => (
            <option key={ele} >{ele}</option>
        ))
    }
</Select>

Answer 2

Используйте второй параметр map для индекса. И тогда index === 0 будет выбрано.

<Select>
      <Option value=""> Choose from the list</Option
      a.map((ele, index) => <Option value={ele} selected={index === 0}> {ele} </Option>)
</Select>