Dynamic attribute in ReactJS

Question

I want to dynamically include/omit the disabled attribute on a button element. I have seen plenty of examples of dynamic attribute values, but not of attributes themselves. I have the following render function:

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

This throws a parse error because of the "{" character. How can I include/omit the disabled attribute based on the (boolean) result of AppStore.cartIsEmpty()?

Community · Accepted Answer · 2017-05-23 12:10:06Z

197

The cleanest way to add optional attributes (including disabled and others you might want to use) is currently to use JSX spread attributes:

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

By using spread attributes, you can dynamically add (or override) whatever attributes you'd like by using a javascript object instance. In my example above, the code creates a disabled key (with a disabled value in this case) when the disabled property is passed to the Hello component instance.

If you only want to use disabled though, this answer works well.

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 17, 2015 at 15:52

WiredPrairie

59.9k18 gold badges120 silver badges149 bronze badges

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

1 Comment

timbo Over a year ago

Once in place, CSS like: a[disabled] { pointer-events: none; } will stop actions on an element/component

Community · Accepted Answer · 2020-12-15 06:05:11Z

74

I'm using React 16 and this works for me (where bool is your test):

<fieldset {...(bool && {disabled:true})}>

Basically, based on the test (bool) you return an object with the conditional attributes or you don't.

Also, if you need to add or omit multiple attributes you can do this:

<fieldset {...(bool && {disabled:true, something:'123'})}>

For more elaborate attribute managed I suggest you prefab the object with (or without) the attributes outside of JSX.

edited Dec 15, 2020 at 6:05

CommunityBot

11 silver badge

answered Nov 22, 2017 at 2:42

Luke

21.4k39 gold badges124 silver badges180 bronze badges

1 Comment

Boateng Ampomah Frederick Over a year ago

this should be the accepted answer

3limin4t0r · Accepted Answer · 2021-08-27 13:55:45Z

57

You can pass a boolean to the disabled attribute.

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

function Test() {
  return (
    <div>
      <button disabled={false}>Clear cart</button>
      <button disabled={true}>Clear cart</button>
    </div>
  );
}

ReactDOM.render(<Test />, document.querySelector("#test-container"));
console.log(Array.from(document.querySelectorAll("button")));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="test-container"></div>

edited Aug 27, 2021 at 13:55

3limin4t0r

21.4k3 gold badges38 silver badges61 bronze badges

answered Mar 17, 2015 at 15:39

Alexandre Kirszenberg

36.4k10 gold badges93 silver badges72 bronze badges

4 Comments

Timmy Over a year ago

no you cannot. the presence of the disabled attribute disables the button completely. see http://jsfiddle.net/ttjhyvmt/

Alexandre Kirszenberg Over a year ago

React is clever enough to conditionally set the disabled attribute on the resulting HTML depending on the value you passed jsfiddle.net/kb3gN/10379

Timmy Over a year ago

not sure how I missed that, thank you! whilst this works for my specific case, I have accepted another answer which omits/includes attributes

LessQuesar Over a year ago

Had issues with IE11, however, we were not using the latest react. The JSX spread attributes answer worked.

jhchnc · Accepted Answer · 2019-05-07 20:05:11Z

7

Far cleaner than the accepted solution is the solution which AnilRedshift mentioned, but which I'll expand on.

Simply put, HTML attributes have a name and a value. As a shorthand, you can use the name only for "disabled", "multiple", etc. But the longhand version still works, and allows for React to work in it's preferred way.

disabled={disabled ? 'disabled' : undefined} is the most legible solution.

answered May 7, 2019 at 20:05

jhchnc

4696 silver badges17 bronze badges

Comments

Yogiyo · Accepted Answer · 2019-07-24 14:00:21Z

6

A simple and clean way of doing it

<button {...disabled && {disabled: true}}>Clear cart</button>

disabled should come from props like this

<MyComponent disabled />

answered Jul 24, 2019 at 14:00

Yogiyo

611 silver badge3 bronze badges

Comments

intentionally-left-nil · Accepted Answer · 2018-03-09 03:00:32Z

5

The version I used was:

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

answered Mar 9, 2018 at 3:00

intentionally-left-nil

8,3858 gold badges40 silver badges62 bronze badges

2 Comments

Raphael Pinel Over a year ago

It is a bad practice to use undefined in your code. It is also unnecessary as you could simply write <button disabled={disabled}> as disabled is a boolean variable than returns true or false

intentionally-left-nil Over a year ago

Why is undefined bad practice? Citation if possible. Also perhaps react properly handles bools now but at nhe time of writing your suggestion would not work correctly

Venkat Reddy · Accepted Answer · 2017-05-10 18:08:23Z

4

More cleaner way of doing dynamic attributes which works for any attributes is

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

Call in your react component like following

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

Tips :

You could have dynamicAttributes function in a common place/utilities and import it to use it across all components
you could pass value as null to not render dynamic attribute

edited May 10, 2017 at 18:08

answered Aug 16, 2016 at 16:31

Venkat Reddy

1,0721 gold badge8 silver badges14 bronze badges

2 Comments

gdbdable Over a year ago

Why not do like this: <ReactComponent {...{ "data-url": dataURL }} /> ? it simpler and no "dynamicAttributes" needed

Venkat Reddy Over a year ago

In case of attribute is null, we don't want react to render that attribute. example: "data-modal": null we don't want react to show data-model="null". in this case my above code wont even show attribute i.e, dynamic attribute based on value.

user3552712 · Accepted Answer · 2016-09-17 05:08:43Z

2

You can find something similar to this at the documentation.

https://facebook.github.io/react/docs/transferring-props.html

In your case could be something like this

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

This code is using ES6, but I thing you got the idea.

This is cool because you can pass many others attributes to this component and it will still work.

answered Sep 17, 2016 at 5:08

user3552712

412 bronze badges

Comments

krave · Accepted Answer · 2022-07-17 03:45:08Z

1

In case others come here for attributes other than disabled, e.g., custom attributes like data-attr, one can assign empty string "" as the value in the object to be spread to eliminate the value of the attribute. With the attribute name only available on the resulted HTML.

For example:

<div {...(trueOrFalse && { [`data-attr`]: "" })}></div>

Furthermore, if you wish the name of the attribute being dynamic too. Due to template strings support string interpolation, you can put state into it to make the name of attribute dynamic.

<div {...(trueOrFalse && { [`${state}`]: "" })}></div>

answered Jul 17, 2022 at 3:45

krave

1,9196 gold badges22 silver badges42 bronze badges

Comments

m02ph3u5 · Accepted Answer · 2020-04-08 11:08:31Z

0

First you can simply check

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

Note: **disabled value is not String, it should be Boolean.

Now for dynamic. You can simply write

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

As you can see I am using disabled property and in curly brackets it can be local variable/state var. The variable disable contains values true/false.

edited Apr 8, 2020 at 11:08

m02ph3u5

3,1617 gold badges43 silver badges59 bronze badges

answered Apr 8, 2020 at 10:41

vinayak lakhotiya

112 bronze badges

Comments

IcyBright · Accepted Answer · 2015-03-17 15:38:11Z

-3

This could work, problem with disabled is one could not simply set boolean for it.

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}

answered Mar 17, 2015 at 15:38

IcyBright

6644 silver badges15 bronze badges

1 Comment

Timmy Over a year ago

I was afraid I might have to resort to this.. I'll wait to see if anybody else has any suggestions before accepting your answer

Collectives™ on Stack Overflow

Dynamic attribute in ReactJS

11 Answers 11

1 Comment

1 Comment

4 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

1 Comment

1 Comment

4 Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related