Adding a Select Form Control

Chapter Comments
1

Hi, newbie question alert. I want to add a drop down list using a Select Form Control, e.g.

<FormGroup controlId="expiry"> <ControlLabel>Expires in</ControlLabel> <FormControl value={expiry} type="select" onChange={e => setExpiry(e.target.value)} />

the React Bootstrap documentation provides an example for adding the form elements (below). Most examples I find are a little different e.g. <Form.Control/> vs <FormControl/>. How can I add select elements using the syntax used in this guide?

<Form.Group controlId="exampleForm.ControlSelect1"> <Form.Label>Example select</Form.Label> <Form.Control as="select"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </Form.Control> </Form.Group>
From https://react-bootstrap.github.io/components/forms/

Thanks!

2

Answering my own question. The tutorial seems to use React Bootstrap 3, the documentation is here;

https://react-bootstrap.netlify.app/components/forms/

And a working example is;

<FormGroup controlId="expiry"> <ControlLabel>Expires in</ControlLabel> <FormControl value={expiry} componentClass="select" onChange={e => setExpiry(e.target.value)} > <option value="24">1 day</option> <option value="48">2 days</option> <option value="72">3 days</option> </FormControl> </FormGroup>

3

Yeah we are still using the older React Bootstrap. Glad you figured it out.