react-bootstrap Add Options to Select - ReactJS

Question

I'm working with react-bootstrap and ReactJS. I was expecting the select to take the options as an argument, but not seeing a way to populate the options. This is the code I have thus far. How do I pass in the data

render() {

    return (
        <div>
            <Button bsStyle="primary" onClick={this.open}>Add Parameter</Button>
            <Modal show={this.state.showModal} onHide={this.close}>
                <Modal.Header>
                    <Modal.Title>Add / Edit Parameter</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <form>
                        <FormGroup controlId="parameterType">
                            <ControlLabel>Type</ControlLabel>
                            <FormControl componentClass="select" placeholder="Type">
                                <option value="select">select</option>
                                <option value="other">...</option>
                            </FormControl>
                        </FormGroup>
                    </form>
                </Modal.Body>
                <Modal.Footer>
                    <Button bsStyle="primary" onClick={this.close}>Save Changes</Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
}

ikerib · Accepted Answer · 2017-07-10 12:57:40Z

7

you'd map over your data to produce the options programmatically. Suppose your options are in an array: options=[{value: 'select'}, {value: 'other'}]

<FormControl componentClass="select" placeholder="Type">
  {
     options.map((option, index) => {
        return (<option key={index} value={option.value}>{option.value}</option>)
     })
  }
</FormControl>

edited Jul 10, 2017 at 12:57

ikerib

8013 gold badges13 silver badges29 bronze badges

answered Feb 21, 2017 at 0:20

Kunal

1,2942 gold badges12 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

react-bootstrap Add Options to Select - ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related