如何在react js中将数组数据绑定到dropdwon

Question

I have below the array.

["Strong", "Good", "Satisfactory", "Weak", "Default", "None"]

I want to bind each value to dropdown so that the user can select any one from it using dropdown control.

I am struggling to do that using react js. I am using react boostrap dropdown.

Can you please help. Thanks in advance. I have below code for drodown.

<Dropdown id={id} key={id}>
  <Dropdown.Toggle>-------Select-------</Dropdown.Toggle>
  <Dropdown.Menu>
    <Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
      array value 0
    </Dropdown.Item>
    <Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
      array value 1
    </Dropdown.Item>
    <Dropdown.Item href="#action-1" onClick={this.onClickHandler}>
      array value 2
    </Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>;

Answer 1

Map over the array items and render it in the JSX like this:

//var arr=["Strong", "Good", "Satisfactory", "Weak", "Default", "None"];
//map over the above array 

<Dropdown>
  <Dropdown.Toggle>-------Select-------</Dropdown.Toggle>
  <Dropdown.Menu>
     {arr.map(item => (
       <DropdownItem>{item}</DropdownItem>
     ))}
  </Dropdown.Menu>
</Dropdown>