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 ponentClass="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>
    )
}

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 ponentClass="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>
    )
}

• javascript
• reactjs
• react-bootstrap

Share Improve this question Follow asked Feb 20, 2017 at 1:16 jkratz55jkratz55 88144 gold badges1414 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

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