I would like to know if it is possible to set onClick on a div element in react based on the value of a property in my case canClick.
I am aware that I can check this.state directly in handler instead I am looking for a solution to be implemented inside render.
...
handler(){
}
render() {
const { canClick} = this.state
return (
<div onClick={this.handler}>hello</div>
)
}
...
Put the condition like this:
onClick={canClick ? this.handler : undefined }
Working Code:
class App extends React.Component {
_click(){
// it will not print the value
console.log('yes');
}
render(){
return (
<div>
<div onClick={false ? this._click : undefined }>Click</div>
</div>
)
}
}
ReactDOM.render(<App />, document.body);<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>You can treat the elements attributes (like onClick) as object properties. Use the spread operator to only on condition, spread the onClick:
<div
{...(canClick && { onClick: this.handler })}
>
hello
</div>
<div onClick={canClick ? this.handler : undefined} />
If you opt for a different falsy value instead of undefined in this ternary (i.e. false or null) React (currently) throws the following warning:
"If you used to conditionally omit it with onClick={condition && value}, pass onClick={condition ? value : undefined} instead."
Edit 2020-01-05: only false throws the above error (React source code here).