how to bind array data to dropdwon in react js

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>;

You do the same as you do [for all other types of data in React](https://reactjs.org/tutorial/tutorial.html): render UI elements with interaction event handlers that trigger state updates, which may in turn call render to effect an updated UI. Nothing you do in React is done "to the browser", the browser only captures the user's events, [immediately kills them off](https://stackoverflow.com/a/36683831/740553), and then lets React do what it needs to do instead. — Mike 'Pomax' Kamermans, Apr 02 '20 at 15:40
@Mike'Pomax'Kamermans I am very new to react and working on PoC. I have not get some of you comment meaning. — Nilesh, Apr 02 '20 at 15:42
If you're very new to React: take the official React Tutorial. It is _super_ worth it, and teaches you the basics in a highly understandable way in less than an hour. Take some time out of what you're doing, do the tutorial, then come back to your original code with a much better understanding of what you're doing, and what you _should_ be doing. — Mike 'Pomax' Kamermans, Apr 02 '20 at 19:36

joy08 · Accepted Answer · 2020-04-02T15:50:28.543

0

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>

edited Apr 02 '20 at 15:50

answered Apr 02 '20 at 15:43

joy08

9,004
8
38
73

Its giving me an error 'DropdownMenu' is not exported from 'react-bootstrap'. – Nilesh Apr 02 '20 at 15:48
I did the code change but it did not render dropdown on page. Its blank, And no error in console as well. var values = ["Strong", "Good", "Satisfactory", "Weak", "Default", "None"]; return ( {values.map(item => ( {item} ))} ); – Nilesh Apr 02 '20 at 15:53
1

Please refer this https://codesandbox.io/s/react-example-h96q8 . Try adding more functionality to it – joy08 Apr 02 '20 at 16:09

how to bind array data to dropdwon in react js

1 Answers1