6

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>
  )
}
...

3

Put the condition like this:

onClick={canClick ? this.handler : false or null}

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: null}>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>

  • could you add a link reference to "or" I never seen it before in js :) thanks – Radex Jan 14 at 7:59
  • hehe, its a english word means any one :) – Mayank Shukla Jan 14 at 8:02
0

You can add Conditional Operator for this kind of purpose.

handler(){
}
render() {
  const { canClick} = this.state
  return (
      <div>
       {
        (canClick) ? 
         (<div onClick={this.handler}>clickble</div>) : 
         (<div>not clickble</div>)
        }
      </div>

  )
}

Here is document example for that reactjs.org/docs/conditional-rendering

0

Yes you can with ternaru operator, which evaluates the left side as boolean and if true it executes the right side or the fallback.

<div onClick={() => canClick ? this.handler() : false }>hello</div>

https://stackblitz.com/edit/react-uwzn4n

  • 2
    I tried this and it didn't work for me. I got Expected 'onClick' listener to be a function, instead got a value of 'boolean' type. when I tried with canClick set to false. – margaretkru Jan 12 at 10:14
  • I have updated the snippet – Mosè Raguzzini Jan 12 at 10:20
0

This is how I would do it:

onClick={(canClick && this.handler) || null}
-1

You can do some conditional render with a separate function to make your main render cleaner, like this:

class ConditionalClick extends React.Component {
  state = {
    canClick: false
  }
  handler() {
    console.log("click");
  }
  renderConditionalOnClick(children) {
    return this.state.canClick ? 
        <div onClick={this.handler}>{children}</div> : 
        <div>{children}</div>;
  }
  render() {
    return (this.renderConditionalOnClick(<span>hello</span>));
  }
}

This way you can render children your clickable or non-clickable div.

  • Please comment on the downvote. – margaretkru Jan 12 at 10:31

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.