CODEWITHSUNDEEP
reactjsreact-nativeif-statementjsx
john tame
john tame

Reputation: 21

Writing an If condition at React

I try to write an if statement inside the loop but it gives an error. I tried to use {} but it does not work too, how can I write it properly.

`<Option
      optionText={option}      

 colorText = {props.colors[index]}
      priceText = {props.prices[index]}
      rangeText = {props.ranges[index]}
      domainText = {props.domains[index]}

    if(this.props.colorText == this.props.domainText){
      //I want to write a if condition here but it says Identifier expected
    }
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
    />
    </div> 
      )) 
    }  
  </div>`

import React from 'react';

const Option = (props) => (

<p className="add-option-color">
  props.rangeText = {(props.colorText == props.domainText) ? props.rangeText : 
    props.domainText}
  {props.count}. Product: {props.optionText} , Color: {props.rangeText} , Price: {props.priceText}</p>


    <button  className="button button--link" onClick={(e) => {
        props.handleDeleteOption(props.optionText,props.colorText,props.priceText);
      }}
    >
      remove
    </button>
    <hr></hr>
  </div>
);

export default Option;

Upvotes: 0

Views: 107

Answers (2)

sanjar
sanjar

Reputation: 1101

The clean way is yo use the ternary operator like in this example :

<Option
      optionText={option}
      colorText = {props.colors[index]}
      priceText = {props.prices[index]}
      rangeText = {props.ranges[index]}
      domainText = {props.domains[index]}
      YOURPROPS = {(this.props.colorText == this.props.domainText) ? VALUEIFTRUE : 
      VALUEIFFALSE}
      count= {index + 1}
      handleDeleteOption={props.handleDeleteOption}
/>

Upvotes: 2

Sadia
Sadia

Reputation: 105

you can call a function like as following ---> 

getAllParams() {
        if(this.props.colorText == this.props.domainText){
          return "pass what you want pass"
        } else {
          return
        }
    }
    render() {    
    <Option
              optionText={option}      
              colorText = {props.colors[index]}
              priceText = {props.prices[index]}
              rangeText = {props.ranges[index]}
              domainText = {props.domains[index]}
              {...this.getParams()}
              count= {index + 1}
              handleDeleteOption={props.handleDeleteOption}
        />
    }

Upvotes: 0

Related Questions