CODEWITHSUNDEEP
htmlreactjscustom-data-attribute
Raviteja
Raviteja

Reputation: 3489

How to add data attribute without value in react create element?

I am adding div to the DOM as below,

React.createElement("div", { className: "test"});

The rendered html should be as below

<div class="test" data-test>
</div>

Where can I add data-test in the createElement?

Upvotes: 11

Views: 13750

Answers (2)

Mμ.
Mμ.

Reputation: 8552

If you refer to the doc on createElement API, you can insert the value to your data-test prop like this:

React.createElement('div', {className: 'test', 'data-test': 'some value'});

Upvotes: 4

Eugene Tsakh
Eugene Tsakh

Reputation: 2879

You can't do that because attribute without any value means that this attribute has value true in JSX. Just don't pass data-test and this.props['data-test'] will be undefined in your component. Or if you need to have this attribute with empty value then just add it to your default values in component definition.

defaultProps: {
    'data-test': ''
}

Upvotes: 1

Related Questions