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

Question

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?

Ravo

Answer 1

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'});

Cyrilcyrill

There's a syntax error in your code: data-test must be quoted. – Ariannearianrhod

@elektronik Good catch! :) – Strand

Answer 2

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': ''
}

Vinitavinn

Also, read more here facebook.github.io/react/docs/… – Etheline

Thanks! This solved my issue and allowed my to add an attribute without value to my html tag. – Royster