ternary operator in jsx to include html with react

Question

I'm using react and I'm trying to display this error message if this.state.message === 'failed'. But I'm really not sure why this ternary operation isn't working. What am I doing wrong here?

render() {
    ...
    <div className="row">
        return (this.state.message === 'failed') ? ( =>{" "}
        {
            <div className="alert alert-danger" role="alert">
                Something went wrong
            </div>
        }
        )() : false; }
    </div>
}

Right now its just displaying return (this.state.message === 'failed') ? ( => in the html

That doesn't look like valid syntax... I'd use a regular if statement there. Why are you returning false anyway? — elclanrs
– elclanrs, Commented Jun 28, 2016 at 19:27
Did you try to wrap it in {} ? Like.. { this.state.message === 'failed' ? <div>Things</div> : null } — Mark C.
– Mark C., Commented Jun 28, 2016 at 19:41

Gosha A · Accepted Answer · 2016-06-29 06:46:33Z

138

I currently like to format my ternaries like this in react:

render () {
  return (
    <div className="row">
      { //Check if message failed
        (this.state.message === 'failed')
          ? <div> Something went wrong </div> 
          : <div> Everything in the world is fine </div> 
      }
    </div>
  );
}

You are correct that IIFEs can be used within a render statement as well as ternary expressions. Using a normal if .. else statement is valid, but the render function's return statement can only contain expressions so you would have to do those elsewhere..

edited Jun 29, 2016 at 6:46

Gosha A

4,5701 gold badge27 silver badges33 bronze badges

answered Jun 28, 2016 at 19:59

Nathan

1,5351 gold badge10 silver badges7 bronze badges

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

1 Comment

Robin Wieruch Over a year ago

Perhaps a good article to learn about React's conditional renderings.

Matis Lepik · Accepted Answer · 2016-06-28 19:44:09Z

The syntax for ternary is condition ? if : else. To be safe, you can always wrap the entire ternary statement inside parenthesis. JSX elements are also wrapped in parenthesis. The fat arrow in an arrow function is always preceeded by two parenthesis (for the arguments) - but you don't need any functions here anyway. So given all of that, there are a couple of syntax errors in your code. Here's a working solution:

render() {
  return (this.state.message === 'failed' ? (
   <div className="alert alert-danger" role="alert">
     Something went wrong
   </div>
  ) : null);
}

Edit: if this is inside other markup, then you don't need to call render again. You can just use curly braces for interpolation.

render() {
  return (
    <div className="row">
      {this.state.message === 'failed' ? (
       <div className="alert alert-danger" role="alert">
         Something went wrong
       </div>
      ) : null}
    </div>
  );
}

Kenigmatic · Accepted Answer · 2017-11-29 05:48:16Z

7

The accepted answer by @Nathan and other similar answers are correct. But it's worth noting that the result for ? and the result for : must each be a single element or wrapped in a single element (or the result may be null | undefined, either of which qualifies as a single element). In the example below, the result for ? will work but the result for : will fail....

return (
  {this.state.message === 'failed' ? (
      <div>
        <row>three elements wrapped</row>
        <row>inside</row>
        <row>another element work.</row>
      </div>
    ) : (
      <row>html like</row>
      <row>haiku</row>
      <row>must follow rules of structure.</row>
    )
  }
)

edited Nov 29, 2017 at 5:48

answered Nov 29, 2017 at 5:21

Kenigmatic

4467 silver badges16 bronze badges

Comments

Elod Szopos · Accepted Answer · 2016-06-28 19:38:26Z

3

You should try this:

render () {
    return (
        <div className="row">
            { (this.state.message === 'failed') ?
                 <div className="alert alert-danger" role="alert">
                     Something went wrong
                 </div> :
                 <span> Everything in the world is fine </span> }
        </div>
    );
}

edited Jun 28, 2016 at 19:38

answered Jun 28, 2016 at 19:27

Elod Szopos

3,52624 silver badges32 bronze badges

2 Comments

Modelesq Over a year ago

This still shows return ( Everything in the world is fine ); on the page when rendered :\

Elod Szopos Over a year ago

Updated to your latest edit in your question. If you want nothing returned, simply replace the <span .. /> with undefined or null.

Nikolay Podolnyy · Accepted Answer · 2017-07-23 09:28:54Z

3

For using variable inside ternary use brackets again

render() {
  return(
    <div className='searchbox'>
     {this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
    </div>
  )
}

answered Jul 23, 2017 at 9:28

Nikolay Podolnyy

1,10112 silver badges19 bronze badges

Comments

Aayushi · Accepted Answer · 2018-02-23 06:35:56Z

3

Given the above answers, you can also directly return a ternary expression from return() in your render() like this

return condition? this.function1(): this.function2();

and inside function1() and function2() you can return your views.

answered Feb 23, 2018 at 6:35

Aayushi

1,8162 gold badges31 silver badges51 bronze badges

Comments

Ezequiel Falcon · Accepted Answer · 2021-12-21 13:13:14Z

2

Please remember that the ternary expression should be wrapped in a Fragment or div, if it's not wrapped it'll throw a compilation error

return (
        <Fragment>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </Fragment>
);

answered Dec 21, 2021 at 13:13

Ezequiel Falcon

3362 silver badges8 bronze badges

1 Comment

boredProjects Over a year ago

probably saved me about 15 mins

risingPhoenix1979 · Accepted Answer · 2023-07-14 23:31:30Z

0

Another answer using React shorthand fragments (like <>...</>) and components (functions and not classes):

return (
        <>
            {fetching ? <Loading></Loading> : <p>Fetched</p>}
        </>
);

answered Jul 14, 2023 at 23:31

risingPhoenix1979

1,1741 gold badge10 silver badges22 bronze badges

Comments

jlizanab · Accepted Answer · 2023-09-28 15:21:37Z

0

{/* If / Else If / Else */}
<div className="row">
    { this.state.message === 'failed' ? '🐞 Something went wrong'
    : this.state.message === 'pending' ? '⌛️ wait a minute...'
    : this.state.message === 'ok' ? '👌 Everything in the world is fine'
    : '👻 Good bye'}
</div>

answered Sep 28, 2023 at 15:21

jlizanab

6547 silver badges6 bronze badges

Collectives™ on Stack Overflow

ternary operator in jsx to include html with react

9 Answers 9

1 Comment

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

Comments

Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related