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?

Mμ. · Accepted Answer · 2017-09-04 08:31:44Z

4

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

edited Sep 4, 2017 at 8:31

answered Apr 14, 2017 at 11:38

Mμ.

8,5723 gold badges28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Ribal Over a year ago

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

Mμ. Over a year ago

@elektronik Good catch! :)

Eugene Tsakh · Accepted Answer · 2017-04-14 11:16:56Z

1

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

edited Apr 14, 2017 at 11:16

answered Apr 14, 2017 at 11:14

Eugene Tsakh

2,8812 gold badges18 silver badges28 bronze badges

2 Comments

yogi Over a year ago

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

marian0 Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related