How to add label for attribute in react?


In this tutorial we are going to learn how to add for to label 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 websites. It help us to navigate and access the page content by everyone. Labels are helpful to understand human readable text for each form input control and helps 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 for attribute. Input control id is matched with for attribute of 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 htmlFor attribute

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

So we have to use htmlFor attribute like seen below

Note: React is case sensitive, first word letter is small and second letter work is capital Here is an 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.