Writing an If condition at React

Question

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;

what is the prop you want to apply if the condition is true? — Chris
– Chris, Commented Nov 23, 2018 at 9:18
That if-statement is not inside a loop. It is inside a JSX element, and you can't write code inside a JSX element, unless it is as the properties value. — Andreas
– Andreas, Commented Nov 23, 2018 at 9:19

sanjar · Accepted Answer · 2019-01-02 13:29:17Z

2

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}
/>

edited Jan 2, 2019 at 13:29

answered Nov 23, 2018 at 9:21

sanjar

1,1012 gold badges9 silver badges18 bronze badges

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

2 Comments

Rajendran Nadar Over a year ago

Why back tick??

sanjar Over a year ago

It was a missclick, I removed it.

Sadia · Accepted Answer · 2018-11-23 14:05:31Z

0

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}
        />
    }

answered Nov 23, 2018 at 14:05

Sadia

1051 silver badge4 bronze badges

Collectives™ on Stack Overflow

Writing an If condition at React

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related