Conditional onClick from ternary

Question

I'm trying to have an onClick event fire depending on the location of the user. if the location is '/favorites' i want to return null i've tried using a ternary operator to achieve this, and cannot find my mistake. heres what i've tried:

             {this.props.location==='/favorites' ? null : 
                onClick={() => {
                    this.props.updateFavsState(this.props.character);
                    this.setState(prevState => ({
                      loved: !prevState.loved
                    }));
                  }}
                }

score 2 · Accepted Answer · edited Mar 16 '19 at 00:23

Put logic in the function and call function onClick event, location pass to the function as argument.

Solution:

handleClick = (location) => {
  if (location === '/favorites') {
    return null;
 }
  this.props.updateFavsState(this.props.character);
  this.setState(prevState => ({
    loved: !prevState.loved
  });
}

// somewhere in your render component
onClick={() => { handleClick(this.props.location)}}

score 0 · Answer 2 · answered Mar 16 '19 at 00:11

0

what you want is

onClick={this.props.location==='/favorites' ? null : 
   () => {
      this.props.updateFavsState(this.props.character);
      this.setState(prevState => ({
          loved: !prevState.loved
      }));
}}

answered Mar 16 '19 at 00:11

Tiago Coelho

5,023
10
17

Conditional onClick from ternary

2 Answers2

Linked