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: 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, and then lets React do what it needs to do instead. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Apr 2, 2020 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
– Nilesh, Commented Apr 2, 2020 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
– Mike 'Pomax' Kamermans, Commented Apr 2, 2020 at 19:36

joy08 · Accepted Answer · 2020-04-02 15:50:28Z

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>

edited Apr 2, 2020 at 15:50

answered Apr 2, 2020 at 15:43

joy08

9,6729 gold badges43 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nilesh Over a year ago

Its giving me an error 'DropdownMenu' is not exported from 'react-bootstrap'.

Nilesh Over a year ago

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 ( <Dropdown> <Dropdown.Menu> {values.map(item => ( <DropdownItem>{item}</DropdownItem> ))} </Dropdown.Menu> </Dropdown> );

joy08 Over a year ago

Please refer this codesandbox.io/s/react-example-h96q8 . Try adding more functionality to it

Collectives™ on Stack Overflow

how to bind array data to dropdwon in react js

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related