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.
In this tutorial, we are going to learn how to add labels in React user forms.
React framework ignores for attributes for label elements.
What does the “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 the 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 the below error
Invalid DOM property for. Did you mean htmlFor?`
React for label example
React has no for property for labels, Instead uses the [htmlFor](https://reactjs.org/docs/dom-elements.html#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](https://reactjs.org/docs/dom-elements.html#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>
How do you set labels in React?
React uses different attributes for labels.
Define label with htmlFor attribute as given below
<label htmlFor="name">Name</label>
Next, use the htmlFor value to an input element with the id attribute
<input id="name" type="text" />
What is the label used for in React?
a label is used to define a string of text for input elements. It is a standard HTML tag, that tells the user about input controls on User Interface.
Here is an example
<label for="name">Name</label>
What is htmlFor in the label React?
htmlFor is used in place of for attribute in React, The reason to replace for an attribute in react, is for is a keyword in javascript to iterate the loop. So you can use
<label htmlFor="name">Name</label>
instead of
<label for="name">Name</label>
Why do we use htmlFor in React?
for is used in the label of standard HTML pages.
React uses JSX, 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.
htmlFor is used in to map the label to the input element.
