YogeshChauhan . com

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 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

What’s the difference between variables in CSS and SCSS (Sass)?CSSHow to create a Progress Bar using JavaScript?JavaScriptWhat is Object Mutability in JavaScript?JavaScriptSpecificity of attribute selectorsCSSData Flows in ReactReactThe difference between Class declarations and Class expressions in JavaScriptJavaScriptHow to Block IPs and User Agents using code in Drupal or WordPress?DrupalHow to create a function in SCSS (Sass)?SCSSEXISTS and NOT EXISTS in PostgresPostgresHow to add onclick event to html elements dynamically using JavaScript?JavaScriptHow to show confirmation alerts with OK and cancel buttons using Swift 5?SwiftHTML canvas methodsHTML