React handle click in reusable stateless component when condition is true

Question

I have on component which is stateless and it is used in both parent component

<div onClick={() => handleClick()}><div>

I have to add handle click function but only for one of them. I have one bool variable which is responsible for that e.g. shouldHandleClick.

So I need to write something like but it works for cases with props, strings etc. etc.

<div {shouldHandleClick ? onClick={() => handleClick()} : null}><div>

Do you have any ideas otherwise i will handle click in the second component which doesn`t need this handle click function

Andrii Starusiev · Accepted Answer · 2017-07-18 10:57:25Z

1

<div onClick={this.props.shouldHandleClick ? this.handleClick : null}><div>

And send shouldHandleClick with props to activate or deactivate click function.

answered Jul 18, 2017 at 10:57

Andrii Starusiev

7,7942 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ivan Burnaev Over a year ago

Be careful with context this

Andrii Starusiev Over a year ago

What wrong can be with context in ternary operator?

Ivan Burnaev Over a year ago

this.handleClick will be called from event listener. If you've not bound this directly to you handler it could cause problems.

Nick1R1 Over a year ago

I don`t have this in my case because this child component which handles the click is stateless. Off course, I bound this in the parent component. Btw everything works as expected - thanks for the syntax hints :))

row1 · Accepted Answer · 2017-07-18 10:57:28Z

1

It looks like you are almost there:

<div onClick={shouldHandleClick ? handleClick : null}></div>

answered Jul 18, 2017 at 10:57

row1

5,5883 gold badges48 silver badges74 bronze badges

Collectives™ on Stack Overflow

React handle click in reusable stateless component when condition is true

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related