title: How to use write ternary operator for click event in React.js
body: <p>I use several ternary operators in my application but I couldn't figure it out how to use ternary operator for on click event.</p>
  
  <p>What I'm making is a popover menu. One of menu items will be not-clickable once that menu item is already selected. Only another menu item should be clickable. </p>
  
  <p>Image </p>
  
  <p><a href="https://i.stack.imgur.com/1Ybf7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Ybf7.png" alt="enter image description here"></a></p>
  
  <p>I tried the following code but it didn't work. Can't we use ternary operator for click event in React? </p>
  
  <pre><code>&lt;p id="menuItem" {!this.sate.priceBar? onClick={this.clickHandle} : "" } style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }&gt;{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}&lt;/p&gt;
  </code></pre>
  
  <p>Full code</p>
  
  <pre><code>class Home extends React.Component{
  
  constructor(props){
      super(props);
      this.state = {
          slideOpen : false,
          priceBar: false,
          open: false,
      }
  this.handleClick = this.handleClick.bind(this);
  this.clickHandle = this.clickHandle.bind(this);
  }
  
  
   handleClick() {
      this.setState({
          slideOpen : !this.state.slideOpen
      })
   console.log("slideOpen" + !this.state.slideOpen)
   }
  
   clickHandle() {
  
   this.setState({ 
            priceBar : !this.state.priceBar,
            open: false
    })
   console.log(!this.state.priceBar)
   }
  
   handleTouchTap = (event) =&gt; {
   // This prevents ghost click.
   event.preventDefault();
  
   this.setState({
    open: true,
    anchorEl: event.currentTarget,
   });
  };
  
  handleRequestClose = () =&gt; {
  this.setState({
    open: false,
  });
  };
  
  render(){
    const PaymentPanel = this.state.slideOpen? "slideOpen" : "";
    const Dropdown = this.state.open? "show" : "";
  
  return(
  &lt;div&gt;
  &lt;div id="PaymentPanel" className={PaymentPanel} &gt;
  &lt;div id="PaymentTitle" &gt;{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 30 Days"}&lt;img src={PaymentArrow} className="PaymentArrow PaymentToggle" onClick={this.handleTouchTap}/&gt;&lt;/div&gt;
  &lt;div id="Dropdown" className={Dropdown}  open={this.state.open}&gt;
  &lt;p className="popoverToggle" onClick={this.handleRequestClose}&gt; &lt;/p&gt;
  &lt;p id="menuItem" onClick={this.clickHandle} style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }&gt;{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}&lt;/p&gt;
  &lt;p id="menuItem" onClick={this.clickHandle} style={this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }&gt;{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}&lt;/p&gt;
  &lt;/div&gt;
  
  
  &lt;h2 id="paymentSum" className={!this.state.open? "" : "close"}&gt;{!this.state.priceBar? "$9,964.55" : "$19,929.1"}&lt;/h2&gt;
  
  
  &lt;ul className="paymentTool"&gt;
  &lt;li&gt;
  &lt;div onClick={this.handleTouchTap} className="tool"&gt;VISA &lt;br /&gt;  {!this.state.priceBar? "$9,504.13" : "$19,008.26"}&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div className="tool"&gt;MasterCard &lt;br /&gt;   {!this.state.priceBar? "$490.64" : "$981.28"}&lt;/div&gt;&lt;/li&gt;
  &lt;li&gt;&lt;div className="tool"&gt;PayPal  &lt;br /&gt; {!this.state.priceBar? "$824.52" : "$1,649.04"}&lt;/div&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div className="paymentSlide" onClick={this.handleClick}&gt;{this.state.slideOpen? &lt;img src={Arrowup} alt="arrowup" className="arrowup" /&gt; : &lt;img src={Arrowdown} alt="arrowdown" className="arrowdown"/&gt;}&lt;/div&gt;
  &lt;/div&gt;
  
   &lt;div className="PaymentTable" &gt;
   &lt;PaymentTable /&gt;
  &lt;ul&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
      )
  }
  }
  </code></pre>