CODEWITHSUNDEEP
javascriptreactjs
V Karthik Reddy
V Karthik Reddy

Reputation: 25

Instead of "for" in label what can i use?

I was working to create a toggle button in React.js,

i was creating input tag's dynamically,

so when i am going to apply for attribute in label it is not working.

please help me out with any other attribute in JS

render: function() {
    var checks = this.state.data.map(function(d) {
        return (
            <div className="switch">
                {d.id}
                <input id="toggle-1" className="toggle toggle-round" type="checkbox" checked={d.selected} onChange={this.__changeSelection.bind(this, d.id)} />
                <label for="toggle-1"></label>
            </div>
        );

Upvotes: 2

Views: 111

Answers (1)

Sean Vieira
Sean Vieira

Reputation: 160043

Looking at the source code it seems that, like class (where you need to use className instead) you need to use an alternate name - in this case htmlFor:

<label htmlFor="toggle-1"></label>

This may be because:

  • both class and for are reserved keywords in JavaScript
  • The attribute name does not map one-to-one with the name exposed to JavaScript in these few cases and React chooses to match the JavaScript API, rather than importing the DOM one (React handles data-* and aria-* transformations, but the docs call that behavior out explicitly).

Upvotes: 3

Related Questions