Using boolean-value of attributes in JSX

Question

I have a React.js project. I want to use data-picker plugin which require this style of input-attributes:

<input data-enable-time=true />

But webpack doesn't compile the app, when true is without quotes. Plugin doesn't work, when true with quotes. What I should do?

UPD.

Yes, I run picker in componentDidMount() It works, but displaying only date, without time.

import React, {Component} from 'react'
const Flatpickr = require('flatpickr');

export default class Date extends Component {

  componentDidMount() {
    let dateInput = document.getElementById('fPicker');
    //init picker
    new Flatpickr(dateInput);

  }

  render() {
    return(
      <div className="dateInputContainer">
        <input id="fPicker" className="flatpickr" data-enable-time="true" />
     </div>
    )
  }
}

But data-enable-time="true" doesn't work.

Answer 1

You can just omit the value assignment; the attribute will be assigned a value of true by default.

Instead of doing any of:

<input data-enable-time=true /> <input data-enable-time='true' /> <input data-enable-time={true} /> 

Do:

<input data-enable-time /> 

This approach avoids the warning Value must be omitted for boolean attributes [react/jsx-boolean-value] when the code is linted via eslint-plugin-react. (See: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)

Answer 2

According to the HTML spec, there is no difference between data-enable-item=true and data-enable-item="true". They will function exactly the same in browsers. Because HTML attributes without quotes are practically never used and can lead to a number of issues, React always uses quoted attributes.

In the snippet below you can check that they do indeed have the exact same effect.

I suspect your plugin not working is probably because you are loading your plugin the wrong way, and not because of the data attribute style. Are you sure you're only starting the date picker after the component has been mounted (for example, in componentDidMount)?

var withoutQuotes = document.getElementById('input-no-attribute-quotes');
var withQuotes = document.getElementById('input-with-attribute-quotes');

console.log('Are the data attributes for test exactly the same? ' + (withoutQuotes.dataset.test === withQuotes.dataset.test ? 'Yes.' : 'No.'));
console.log('Data attributes without quotes\n', withoutQuotes.dataset);
console.log('Data attributes with quotes\n', withQuotes.dataset);

<input id=input-no-attribute-quotes data-test=true />
<input id="input-with-attribute-quotes" data-test="true" />

Answer 3

Try something like this:

<input data-enable-time={true} />