ReactJS checked Attribute

ReactJS selected Attribute

Last Updated : 04 Jun, 2021

React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component.

In this article, we will know how to use the selected attribute. The selected attribute is used to set the default selected option which is displayed already on the select element.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.
```
npx create-react-app foldername
```
Step 2: After creating your project folder i.e. foldername, move to it using the following command.
```
cd foldername
```

Project Structure: It will look like the following.

Example:

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import ReactDOMServer from 'react-dom/server';

 
const element = <div>
    <h1>GeeksforGeeks</h1>
    <select>
      <option value="React">React</option>
      <option value="Angular">Angular</option>
      <option selected value="JavaScript">JavaScript</option>
      <option value="HTML">HTML</option>
    </select>
</div>;

ReactDOM.render(
  element,
    document.getElementById("root")
);

Output:

Reference: https://reactjs.org/docs/dom-elements.html#selected

ReactJS checked Attribute

D

dheerchanana2002

Improve

Article Tags :

Similar Reads

ReactJS value Attribute

React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In this article, we will know how to use value attributes. The value at

HTML selected Attribute

The selected attribute in HTML is used to specify which option should be by default selected when the page loads. This is a boolean attribute. The option that has the selected attribute will be displayed by default.Syntax: <option selected>value</option>Note: This attribute can be used o

React-Bootstrap Select

In this article, we will learn about the React-Bootstrap Select known as Form.Select, Form.Select is a component that helps to create dropdown menus in React apps that look good. The advantage of Bootstrap's styling is that crafting menus that excel in both functionality and aesthetics is our goal.

React MUI Select Input

React MUI Select is an input component that provides the options, multi select and autocomplete functionalities. This component is used for collecting user-provided data from a list of options. React MUI Select Input Syntax: <Select onChange={handleChange} > <MenuItem value={1}>Item 1

ReactJS checked Attribute

In ReactJS, managing form elements like checkboxes and radio buttons is a common task, and the checked attribute plays an important role when working with these input elements. The checked attribute is used to control the state of checkboxes and radio buttons in a React component. This article will

ReactJS htmlFor Attribute

When working with forms in React, you may notice some differences from traditional HTML attributes. One such difference is the htmlFor attribute, which is used instead of the standard for attribute. This article will explain why React uses htmlFor and how to use it effectively when building forms in

React Suite Button Active

React Suite is a popular front-end library with a set of React components that are designed for the middle platform and back-end products. The Button component is used to fire an action when the user clicks the button. In this article, we will be learning about the React Suite Button Active.Â To mak

ReactJS useSelect hook

The useSelect is a custom hook provided by the Rooks package for React. It is a list selection hook that helps select values from a list. Arguments: list: It is of the type array which describes the list of items for the selection. The default value is undefined.initialIndex -It is of the type numbe

React.js Blueprint Select2

Blueprint is a React-based UI toolkit for the web. This library is very optimized and popular for building interfaces that are complex and data-dense for desktop applications. In this article, we'll discuss React.js Blueprint Select2. Select2 component displays a list of items to choose one item and

What is React Select ?

React Select is a drop-down select component that has multiple features like multi select and autocomplete. React select also offers custom styling and fixed selection in it. In this article, we are going to learn and implement React Select. PrerequisitesFamiliar with React JSAsynchronous JavaScript