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?

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

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