conditional add JSX attribute in ReactJS

Question

So I have this button in JSX:

<button className="btn btn-primary" {usersOnCall.indexOf(user) > -1 ? "disabled" : ""}></button>

I want the button to be disabled when the conditional is true, I tried above code but it didn't work. Can anybody give me a suggestion how to do it? Many thanks!

you are not adding disable as attribute, that is your problem. — Pardeep Jain
– Pardeep Jain, Commented Sep 5, 2017 at 9:25

bennygenel · Accepted Answer · 2017-09-05 10:14:00Z

4

Change your code accordingly

<button className="btn btn-primary" disabled={usersOnCall.indexOf(user) > -1 ? true : false}></button>

Or you can shorten with

<button className="btn btn-primary" disabled={(usersOnCall.indexOf(user) > -1)}></button>

Update accourding to @Chris's comment

ES6 option:

<button className="btn btn-primary" disabled={usersOnCall.includes(user)}></button>

edited Sep 5, 2017 at 10:14

answered Sep 5, 2017 at 9:07

bennygenel

24.8k7 gold badges68 silver badges80 bronze badges

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

2 Comments

Òscar Raya Over a year ago

This is the best option.

Chris Over a year ago

For ES6 I would also add disabled={usersOnCall.includes(user)} as an option.

Hemerson Carlin · Accepted Answer · 2017-09-05 09:06:17Z

1

Use disabled as a prop as well as className. usersOnCall.indexOf(user) > -1 is already a boolean value and you don't have to return true or false

<button
  className="btn btn-primary"
  disabled={usersOnCall.indexOf(user) > -1}
></button>

answered Sep 5, 2017 at 9:06

Hemerson Carlin

7,4241 gold badge29 silver badges38 bronze badges

Comments

score 0 · Accepted Answer · 2017-09-05 09:29:01Z

0

Place your condition instead of YOUR_CONDITION.

<button
  disabled={YOUR_CONDITION}>
</button>

edited Sep 5, 2017 at 9:29

answered Sep 5, 2017 at 9:13

user4932805

Collectives™ on Stack Overflow

conditional add JSX attribute in ReactJS

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related