How to create a dynamic dropdown list with a bootstrap reaction

Question

The sample code on the response-bootstrap site shows the following. I need to control the parameters with an array, but I can not find examples that will compile.

<Input type="select" label="Multiple Select" multiple> <option value="select">select (multiple)</option> <option value="other">...</option> </Input> 

Answer 1

You can start with these two functions. The first will create your choices dynamically based on the props passed to the page. If they are mapped to state, then the selection will be recreated.

  createSelectItems() { let items = []; for (let i = 0; i <= this.props.maxValue; i++) { items.push(<option key={i} value={i}>{i}</option>); //here I will be creating my options dynamically based on //what props are currently passed to the parent component } return items; } onDropdownSelected(e) { console.log("THE VAL", e.target.value); //here you will see the current selected value of the select input } 

Then you will have this block of code inside the rendering. You will pass the function reference to onChange prop, and each time the Change is called the selected object, it is automatically associated with this function. Instead of manually writing your parameters, you simply call the createSelectItems () function, which will build and return your parameters based on some restrictions (which may change).

  <Input type="select" onChange={this.onDropdownSelected} label="Multiple Select" multiple> {this.createSelectItems()} </Input> 

Answer 2

My working example

 this.countryData = [ { value: 'USA', name: 'USA' }, { value: 'CANADA', name: 'CANADA' } ]; <select name="country" value={this.state.data.country}> {this.countryData.map((e, key) => { return <option key={key} value={e.value}>{e.name}</option>; })} </select> 

Answer 3

A 1 liner will be:

 import * as YourTypes from 'Constants/YourTypes'; .... <Input ...> {Object.keys(YourTypes).map((t,i) => <option key={i} value={t}>{t}</option>)} </Input> 

Assuming you save the list constants in a separate file (and you should, if they are not loaded from the web service):

 # YourTypes.js export const MY_TYPE_1="My Type 1" .... 

Answer 4

You need to add a key for matching, otherwise it will warn, because each attribute must have a unique key. Code modified below: let optionTemplate = this.state.values.map ((v, index) => ({v.name}));

Answer 5

You can create dynamic selection parameters by map ()

Code example

 return ( <select className="form-control" value={this.state.value} onChange={event => this.setState({selectedMsgTemplate: event.target.value})}> { templates.map(msgTemplate => { return ( <option key={msgTemplate.id} value={msgTemplate.text}> Select one... </option> ) }) } </select> ) </label> ); 

Answer 6

 // on component load, load this list of values // or we can get this details from api call also const animalsList = [ { id: 1, value: 'Tiger' }, { id: 2, value: 'Lion' }, { id: 3, value: 'Dog' }, { id: 4, value: 'Cat' } ]; // generage select dropdown option list dynamically function Options({ options }) { return ( options.map(option => <option key={option.id} value={option.value}> {option.value} </option>) ); } <select name="animal" className="form-control"> <Options options={animalsList} /> </select> 

Answer 7

Link dynamic drop using arrow function.

 class BindDropDown extends React.Component { constructor(props) { super(props); this.state = { values: [ { name: 'One', id: 1 }, { name: 'Two', id: 2 }, { name: 'Three', id: 3 }, { name: 'four', id: 4 } ] }; } render() { let optionTemplate = this.state.values.map(v => ( <option value={v.id}>{v.name}</option> )); return ( <label> Pick your favorite Number: <select value={this.state.value} onChange={this.handleChange}> {optionTemplate} </select> </label> ); } } ReactDOM.render( <BindDropDown />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"> <!-- This element contents will be replaced with your component. --> </div>