{

How to add a label for an attribute in react?


In this tutorial, we are going to learn how to add labels in React user forms.

React framework ignores for attribute for label element.

What does “for” attribute do in HTML tag?

React provides web accessibility guidelines to create a website. It helps us to navigate and access the page content by everyone. Labels are helpful to understand human-readable text for each form input control and help blind, keyboard, and mouse users.

When you are creating an form in Html pages, You will create a label and input that bind together as seen below

<label for="name">Name</label>
<input id="name" type="text" />

Usually, labels are bound to input text using the for attribute. Input control id is matched with for attribute of the label. This applies to checkboxes, radio, and select controls.

if you use the same code in React JSX, It breaks during component loading

and throws below error

Invalid DOM property for. Did you mean htmlFor?`

React has no for property for labels. It defined the htmlFor attribute.

The reason is, you are writing HTML code in JSX syntax. JSX is an extension to javascript which executes javascript code. for is a keyword or reserved word in javascript. So we can not use it directly.

So we have to use the htmlFor attribute like seen below.

Note: React is case sensitive, the first-word letter is small, and second letter work is capital Here is a react for label example component

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: 'React'
    };
  }

  render() {
    return (
      <div>
        <label htmlFor="name">Name</label>
        <input id="name" type="text" />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Once this component is rendered, generated DOM contains for attribute instead of htmlFor attribute for an label When you inspect the code, You will see the below code

<html class=" "><head>
  </head>
<body><div id="root"><div><label for="name">Name</label><input id="name" type="text"></div></div></body></html>
THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.





Related posts

ReactJS Append variables with strings, jsx state and prop concatenate html

How to display the content of a JSON file in React with example

Reactjs Fix Must call a super constructor in derived class before accessing this

How to change default port in React with create-react-app command?

How to create an react typescript application | Create-react-app typescript application

How to handle broken images in React | fallback for broken images

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React