Implementing React-Bootstrap select component as a controlled component

Question

Our website is styled with Bootstrap. I'm trying to implement a React-Bootstrap select component. How do I make it into a controlled component? More specificly, how do I mark the selected option. Usually it is with a value property in the parent component. Is this how it works for React-Bootstrap select as well? What function runs when a new option is selected? What are the parameters of the function?

Ben Carp · Accepted Answer · 2018-04-12 11:03:57Z

1

After trial and error here is an example:

const applySelect = (event) => {someFunction(event.target.value)};
const selectedValue = 3;
return (
    <FormGroup controlId="formControlsSelect">
        <ControlLabel >Label String</ControlLabel>
        <FormControl componentClass="select" placeholder="select" value={selectedValue} onChange={applySelect}>
            <option value="0" key="0">Option 0</option>
            <option value="1" key="1">Option 1</option>
            <option value="2" key="2">Option 2</option>
        </FormControl>
     </FormGroup>

answered Apr 12, 2018 at 11:03

Ben Carp

26.9k11 gold badges70 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

Implementing React-Bootstrap select component as a controlled component

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