How do you use dropdowns in React 16?
Let's answer to this question with a simple example.
We're going to build a React app that creates a form with a payment methods dropdown:
Initially, no payment method will be selected and the
Submit button will be disabled - users can't submit a form without selecting a payment method first.
Users can click on the dropdown to select one of the payment methods:
Once the payment method is selected, the
Submit button is enabled and users can submit the form:
When you click the
You can find the full source code in this GitHub repository.
First let's create
App component is a stateful component that renders form. Let's take a closer look at it's
App component renders
button elements. The
select element creates our dropdown:
Our dropdown has four options:
Each option is created with
option element that gets
At this point we should ask ourselves two questions:
Let's answer these questions.
Each option in our dropdown represents a state. You can think of a
select element as a stateful component. This state is hidden from us and we don't control it. We don't control and we don't know which option is selected. However, if we do need to know which option is selected, then we need to take control over the
select element. If you have read my Radio Buttons in React 16 tutorial, then you already know that React gives you an option to create form elements that are controlled by you - they're called Controlled Compponents.
To take control over our
select element, we need to do two things.
First, we provide
value prop to our
select element. This prop tells React which
option inside of our
select to render. How does it know? Each
option element has it's own
value prop. If
value prop matches
option's value prop, then React will render that
Second, we prodive
onChange prop to our
select element. The
onChange prop takes a callback function that React will call every time user selects different option.
When we take control over our
select element, we take control over it's state and now our
App component will own that state and represent it with
We set the initial state of
App component also declares the
handleSelectValue function that updates
A new value for
selectedValue state property comes from the
event object that React will pass as a param when it calls the
handleSelectValue callback function. The
event object has
target property that has
value property - that's the value that we set for each
this.state.selectedValue to the
value prop and
this.handleSelectValue to the
onChange prop of our
The idea is that
select element always gets it's value from our
App component's state. Then user interacts with our dropdown and selects a different option. The
select element calls
onChange prop which will call our
this.handleSelectValue function. The
this.handleSelectValue function will update
App component's state and React will re-render
App component - only this time it will render our
select element with a different option selected.
Then we pass
handleFormSubmit function to the
onSubmit prop of the
And that's how you create dropdowns in React 16!
Thank you for your attention.