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.

Jon Schneider · Accepted Answer · 2018-11-15 19:01:56Z

89

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)

answered Nov 15, 2018 at 19:01

Jon Schneider

27.2k25 gold badges158 silver badges183 bronze badges

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

Comments

Ambroos · Accepted Answer · 2016-07-29 13:48:07Z

14

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" />

answered Jul 29, 2016 at 13:48

Ambroos

3,46622 silver badges27 bronze badges

3 Comments

Ambroos Over a year ago

I suspect you have a different issue then, because flatpickr uses dataset to get the data attributes, and as you can see in my answer, the result of dataset is the same with and without quotes on data-enable-time.

Ambroos Over a year ago

@OP, please don't delete your comments after they've had responses. I've looked at the Flatpickr source for you and I think you should try data-enabletime instead of data-enable-time. Probably a bug in the library.

Ambroos Over a year ago

Don't forget to mark the right answer/comment as correct.

traktor · Accepted Answer · 2022-01-14 23:10:28Z

9

The answer is right over on this github markdown. My solution is writing your code in the style:

<input data-enable-time /> /*treats as true*/
<input data-enable-time={false} /> /*treats as false*/

when you are going to specify a trueish attribute you should omit the value and when you are going to specify it false you shouldn't pass the attribute

edited Jan 14, 2022 at 23:10

traktor

19.7k5 gold badges37 silver badges56 bronze badges

answered Jun 27, 2021 at 14:56

Emad Baqeri

2,7122 gold badges19 silver badges34 bronze badges

2 Comments

Jayna Tanawala Over a year ago

What if we want to assign dynamically? I just want to achieve form validation and that is required to assign value dynamically

Emad Baqeri Over a year ago

Hi @JaynaTanawala, if you want to assign a value dynamically you are going to need curly braces. <input data-enable-time={myDynamicValue} />

ksnietka · Accepted Answer · 2016-07-29 13:21:06Z

4

Try something like this:

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

answered Jul 29, 2016 at 13:21

ksnietka

1157 bronze badges

2 Comments

Jon Schneider Over a year ago

This produces warning Value must be omitted for boolean attributes [react/jsx-boolean-value] when the code is run through eslint-plugin-react. (See: github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/…)

kukis Over a year ago

Then maybe this rule should be ignored

ksnietka · Accepted Answer · 2016-07-29 13:29:51Z

0

i guess thats a loader problem, Try to put

  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-object-assign', 'transform-class-properties', 'transform-decorators-legacy', 'transform-es2015-modules-commonjs-simple',],
        },


      },
      ...
    ],

  },

into your webpack.conf.js file and install every plugin via npm

for example:

npm install --save-dev babel-plugin-react-html-attrs

answered Jul 29, 2016 at 13:29

ksnietka

1157 bronze badges

1 Comment

Yarik Genza Over a year ago

Still not working. You can see screenshot pp.vk.me/c626318/v626318440/1dadc/g8iAahZKmv4.jpg

Sara · Accepted Answer · 2021-09-13 14:14:24Z

0

Tricky stuff.. I am always forgetting about this. In this case just use: <input data-enable-time />

Without assigning it to the boolean.

answered Sep 13, 2021 at 14:14

Sara

1471 silver badge4 bronze badges

Comments

sushruth murakare · Accepted Answer · 2024-10-27 22:18:20Z

0

<Button disabled={true} >
        LOGIN
      </Button>

Instead of doing this you have to just pass disabled

<Button disabled >
        LOGIN
      </Button>

answered Oct 27, 2024 at 22:18

sushruth murakare

631 silver badge7 bronze badges

Collectives™ on Stack Overflow

Using boolean-value of attributes in JSX

7 Answers 7

Comments

3 Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

3 Comments

2 Comments

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related