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()?

Answer 1

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.

Answer 2

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>