Question

70

How can I write an else if structure using React (JSX) - the ternary is not expressive enough

rated 0 times [ 76] [ 6] / answers: 1 / hits: 103016 / 8 Years ago, sun, august 7, 2016, 12:00:00

I want to write the equivalent in react:

if (this.props.conditionA) {

    <span>Condition A</span>

} else if (this.props.conditionB) {

    <span>Condition B</span>

} else {

    <span>Neither</span>

}

So maybe

render() {

    return (<div>

        {(function(){

            if (this.props.conditionA) {

                return <span>Condition A</span>

            } else if (this.props.conditionB) {

                return <span>Condition B</span>

            } else {

                return <span>Neither</span>

            }

        }).call(this)}

    </div>)

}

But that seems overly complex. Is there a better way?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

gleng

Add To Favorites

Follow

Total Points: 471

Total Questions: 107

Total Answers: 102

Location: Virgin Islands (U.S.)

Member since Fri, May 7, 2021

3 Years ago

answered 8 Years ago stacie · Accepted Answer

Why do you say that the ternary is not expressive enough?

render() {

  return <span>

    {this.props.conditionA ? Condition A 

      : this.props.conditionB ? Condition B 

      : Neither}

  </span>;

}