Disable things in JSX

Helper to disable clickable objects.

by Trevor Power

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<div id="container"></div>

SCSS

.red {
  color: red
}

.green {
  color: green
}

Babel + JSX

const clickable = (props) => ({
  ...props,
  onClick: props.disabled ? '' : props.onClick
})

const Item = props => (
  <div {...clickable(props)}>
  	{props.children}
  </div>
)

const Example = props => (
  <div>
    <Item onClick = {() => alert('works')} className = 'green'>Click me!</Item>
    <Item disabled onClick = {() => alert('works')} className = 'red'>Don't click me!</Item>
  </div>
)

ReactDOM.render(<Example / > , document.getElementById('container'))