{

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 for everyone. Labels are helpful to understand human-readable text for each form of input control and help blind, keyboard, and mouse users.

When you are creating a 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, that 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 as seen below.

Note: React is case sensitive, the first-word letter is small, and the 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 the for attribute instead of the htmlFor attribute for a 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.