If true set attribute else set className in JSX

Question

I have a button in my Component, that should be disabled if the item status is accepted, otherwise bootstrap success class should be appended.

The Problem I´m facing here is that disabled is not a className rather than an attribute and bootstrap btn btn-success is a className.

If it is just about classNames I have no problems with that like here

className={items.status === 'declined' ? 'danger' : 'success'}>

But this results in an error and I have currently no clue how to do that.

 {items.status === 'accepted' ? 'disabled' : 'className=btn btn-success'}

I have also done some research previously, but that didn´t helped me. React.js Disable button

Can someone point me in the right direction here? How can I write a JSX shorthand if-else when true is an attribute and false a className?

Thanks in advance!

Oleksandr T. · Accepted Answer · 2016-07-29 07:52:35Z

You should set both attributes className and disabled

const isAccepted = items.status === 'accepted'; const buttonClasses = isAccepted ? '<some class>' : '<another class>' <button className={ buttonClasses } disabled={ isAccepted } > Button </button>

Serhii Baraniuk · Accepted Answer · 2016-07-29 07:53:13Z

class Example extends React.Component { render() { const disabled = true const className = true === 'declined' ? 'danger' : 'success' return ( <button disabled={disabled} className={className}> Example </button> ) } } ReactDOM.render( <Example />, document.getElementById('app') )

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app" />

Collectives™ on Stack Overflow

If true set attribute else set className in JSX

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related