CODEWITHSUNDEEP
reactjs
aaayumi
aaayumi

Reputation: 1274

How to use write ternary operator for click event in React.js

I use several ternary operators in my application but I couldn't figure it out how to use ternary operator for on click event.

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.

Image

enter image description here

I tried the following code but it didn't work. Can't we use ternary operator for click event in React? 

<p id="menuItem" {!this.sate.priceBar? onClick={this.clickHandle} : "" } style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>

Full 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) => {
 // This prevents ghost click.
 event.preventDefault();

 this.setState({
  open: true,
  anchorEl: event.currentTarget,
 });
};

handleRequestClose = () => {
this.setState({
  open: false,
});
};

render(){
  const PaymentPanel = this.state.slideOpen? "slideOpen" : "";
  const Dropdown = this.state.open? "show" : "";

return(
<div>
<div id="PaymentPanel" className={PaymentPanel} >
<div id="PaymentTitle" >{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 30 Days"}<img src={PaymentArrow} className="PaymentArrow PaymentToggle" onClick={this.handleTouchTap}/></div>
<div id="Dropdown" className={Dropdown}  open={this.state.open}>
<p className="popoverToggle" onClick={this.handleRequestClose}> </p>
<p id="menuItem" onClick={this.clickHandle} style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"}</p>
<p id="menuItem" onClick={this.clickHandle} style={this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{this.state.priceBar? "Spent Last 30 Days" : "Spent Last 30 Days"}</p>
</div>


<h2 id="paymentSum" className={!this.state.open? "" : "close"}>{!this.state.priceBar? "$9,964.55" : "$19,929.1"}</h2>


<ul className="paymentTool">
<li>
<div onClick={this.handleTouchTap} className="tool">VISA <br />  {!this.state.priceBar? "$9,504.13" : "$19,008.26"}</div></li>
<li><div className="tool">MasterCard <br />   {!this.state.priceBar? "$490.64" : "$981.28"}</div></li>
<li><div className="tool">PayPal  <br /> {!this.state.priceBar? "$824.52" : "$1,649.04"}</div></li>
</ul>
<div className="paymentSlide" onClick={this.handleClick}>{this.state.slideOpen? <img src={Arrowup} alt="arrowup" className="arrowup" /> : <img src={Arrowdown} alt="arrowdown" className="arrowdown"/>}</div>
</div>

 <div className="PaymentTable" >
 <PaymentTable />
<ul>
</ul>
</div>
</div>
    )
}
}

Upvotes: 2

Views: 15612

Answers (3)

Skender Ademi
Skender Ademi

Reputation: 91

In case you are using functions instead of classes in React:

onClick={() => condition ?  functionToClick() : null}

Upvotes: 7

JiangangXiong
JiangangXiong

Reputation: 2426

Of course， the ternary operate can't be used to return a property of the dom because the return values of expression is a string, the browser and react.js engine will not treat a string as property.

Instead: 

onClick={!this.state.priceBar ? this.clickHandle : ''}

Modify your code:

handleTouchTap(event){

}

handleRequestClose() {
}


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) {
 // This prevents ghost click.
 event.preventDefault();

 this.setState({
  open: true,
  anchorEl: event.currentTarget,
 });
}

handleRequestClose () {
this.setState({
  open: false,
});
}

render(){
  const PaymentPanel = this.state.slideOpen? "slideOpen" : "";
  const Dropdown = this.state.open? "show" : "";

return(
<div>
<div id="PaymentPanel" className={PaymentPanel} >
<div id="PaymentTitle" >{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 30 Days"}</div>
<p id="menuItem" onClick={this.clickHandle} style={!this.state.priceBar? { color:'white'} : {color : '#BBBBBB'} }>{!this.state.priceBar? "Spent Last 14 Days" : "Spent Last 14 Days"} (Click me!)</p>

click top line


</div>
</div>

    )
}
}
ReactDOM.render(<Home />, document.querySelector('.app'))
<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>
<div class="app"></div>

Upvotes: 3

Artem Mirchenko
Artem Mirchenko

Reputation: 2170

<p id="menuItem" onClick={!this.state.priceBar ? this.clickHandle : null}>

Upvotes: 1

Related Questions