What is htmlfor attribute in label tag React ?

I know , many times you all have a query while using label tag in React , that What is “htmlfor” attribute work in label tag , let’s take a example code in React –

<label htmlFor="new-todo">
    What needs to be done?
</label>
<input
       id="new-todo"

 />

Once this is rendered on Web Page, generated DOM contains the for attribute instead of the htmlFor attribute for a label tag , When you inspect the code, You will see the below code –

<label for="new-todo">
    What needs to be done?
</label>
<input id="new-todo" />

Here there is a little difference , in both code , in React We have “htmlfor” but once it renders , than on Web it becomes “for” in HTML.

With this analysis, we can say that , “htmlfor” attribute is similar to “for” attribute in HTML.

As  for attribute is in labels , as shown in above code , It refers to the id of the element (input , textbox, select etc) on which the label is associated.

When the user clicks with the mouse on the new-todo text ,the browser will automatically put the focus in the corresponding input field.