Using boolean-value of attributes in JSX

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

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 quotesn', withoutQuotes.dataset);
console.log('Data attributes with quotesn', withQuotes.dataset);

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