2

If I write this in JSX and render it with React:

<div data-foo>Hello world</div>

...the resulting DOM looks like this:

<div data-foo="true">Hello world</div>

Why?

For comparison, when I use standardised boolean attributes (e.g. <button disabled>OK</button>), this doesn't happen – the resulting DOM is the same as the JSX. Why are boolean data-attibutes treated differently?

Improve this question
6
  • There's no such thing as a boolean data- attribute. They're strings as far as the DOM is concerned. Commented Jul 19, 2017 at 14:43
  • @Pointy that contradicts stackoverflow.com/a/9729132/414825 – although you might be right, another answer argues it's wrong Commented Jul 19, 2017 at 14:44
  • Yes it does; I think that answer is incorrect. Here's some HTML5 documentation on the topic. Commented Jul 19, 2017 at 14:49
  • I'm not sure what React does with data- attributes, but for example the jQuery .data() API checks to see if the attribute value can be interpreted as JSON, and if so you get back the result of a JSON parse, and in the case of strings that look like JavaScript primitives (numbers and booleans) you get the parsed primitive value. Commented Jul 19, 2017 at 14:52
  • Maybe, it works as designed. If you have a reason to not want this behaviour, you should open an issue in the Git repo. Commented Jul 19, 2017 at 15:48
Related questions
44
Using boolean-value of attributes in JSX
83
why we cannot pass boolean value as props in React , it always demands string to be passed in my code
2
Boolean is FALSE when it should be TRUE
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.