I am in the process of implementing a room reservation system. I want to add 2-4 different room types, but I try to add a dropdown menu so you can choose from the 2-4 room types and that you do not write it yourself, I'm using/following this. I have tried to apply <Form.Select...>, that did not work.
I've searched everywhere but I could not find anything useful.
"react": "^17.0.2",
"react-bootstrap": "^1.6.4",
Here's my code:
<Form.Row className="mb-lg-3">
<Form.Group as={Col} controlId="roomTypeSelection" lg="4" md="12">
<Form.Label>Room Type:<span className="text-danger">*</span></Form.Label>
<Form.Control
ref={manufacturerInputRef}
onChange={handleChange}
name="roomTypeSelection"
value={values.roomTypeSelection}
type="text"
placeholder="Type your desired room..."
isInvalid={!!errors.roomTypeSelection}
isValid={touched.roomTypeSelection && !errors.roomTypeSelection}
/>
<Form.Control.Feedback type="invalid">
{errors.roomTypeSelection}
</Form.Control.Feedback>
</Form.Group>
</Form.Row>
I've tried to implement (taken from the site, that I've linked to) into my code above, but it is not working together, it is working separately:
<Form.Select>
<option>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</Form.Select>
That gave me a blank screen on my page.
How should I do that and implement a dropdown menu inside the Forms? How does Form.Control settings work, how can I instead of text add a dropdownlist, is there a keyword for that?
You are using React bootstrap for adding dropdown menu inside react form. To solve this, you can use this tag. Try this one:
<form>
<label>
Room type:
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</label>
</form>