1. Home
  2. Select Tag

Select Tag

In HTML, the <select> tag creates multiple options and values. Our react-select component follows the same convention but the options and values are passed in as props. For example:

<select>
    <option value="GFG">GFG</option>
    <option value="OS">OS</option>
    <option value="DBMS">DBMS</option>
    <option selected value="Data Structure">
        Data Structure
    </option>
</select>

Note: Data Structure option is initially selected, because of the selected attribute. But in React instead of using a selected attribute, it uses a value attribute on the root select tag which is shown in the below example.

render() {
   return (
       <select value={this.state.value} 
                  onChange={this.handleChange}>
          <option value="GFG">GFG</option>
          <option value="OS">OS</option>
          <option value="DBMS">DBMS</option>
          <option selected value="Data Structure">
               Data Structure
          </option>
        </select>
   )
}

Attributes that work differently between React and HTML

There is a minor difference between React(JSX) and HTML attributes. Like for example, the HTML attributes like class and for are replaced with className and htmlFor in React. There are a number of attributes that work differently between React and HTML. Grammar in JSX is mostly the same as in HTML, but there are subtle differences to watch out for. 

Some tags are given below:

Table of Content

  • className
  • Self-Closing Tag
  • htmlFor
  • Select Tag
  • textarea Tag
  • dangerouslySetInnerHTML

Similar Reads

1. className:

In HTML, it’s common to use the class as an attribute name as shown below:...

2. Self-Closing Tag:

Some HTML elements such as ,
and use only one tag. The tag that belongs to a single tag that neither has an opening tag nor a closing tag, that is called self-closing tag....

3. htmlFor:

In HTML, we often use for attribute in

4. Select Tag:

In HTML, the