Yogesh Chauhan's Blog

How to add a select dropdown in React?

in React on May 13, 2021

HTML vs React select dropdown

There are few differences between HTML and React select dropdown.

This is how we add select dropdown in HTML:

  <option selected value="react">React</option>
  <option value="angular">Angular</option>
  <option value="vue">Vue</option>

In the HTML dropdown above, we have “selected” attribute set for the first option so it will be selected automatically.

React does the same thing in a different way.

In React, we need to set “selected” attribute to the main select element.

How is that advantageous over the HTML?

Well, for HTML you need to type code to a specific location to auto select or even change the selection. With React the code stays at the same place so cleaner and nicer way to code.

Another advantage I can think of is that if you’re using a server side language, such as PHP, to add that selected attribute then you need to add the condition to each and every option. You can always come up with a login to reduce the code you write but still it makes a bit messier.

The way React changes the select dropdown using the root element control, the technique is called a controlled component.

React Dropdown Example

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface #Jan 14 How to display a student’s individual transcript in Colleague? #Jan 11 How to install PuTTY on a MacOS?
You might also like these
A quick introduction to API, REST API and PostmanMiscellaneousHow to add today’s date in HTML input date value using JavaScript?JavaScriptHow to list all PHP variables to debug the script?PHPuser_can vs current_user_can in WordPressWordPressWhat’s new in Constructor in PHP 8?PHPJavaScript Number MethodsJavaScriptFilling a button background from left to right using CSSCSSHow to use data-* Attributes in HTML?HTMLHow to create a placeholder loader (throbber) using CSS?CSSCustom Post Type Template Files in WordPressWordPressSolution to pod install fails with json error on Mac OS X 10.15 (or Mac OS Catalina)MiscellaneousRIGHT JOIN in PostgresPostgres