Using a ternary operator to return HTML

Question

I know how to use a ternary operator like this:

{ this.state.showThanks ? 'Thanks for your response!' : null }

But I would like to render html and then remove that html on click

    { this.state.showThanks ? <input type="submit" className="decisionButtons" id="canDecisionButton" value="I can play" onClick={() => this.canPlay()}/>
                <input type="submit" className="decisionButtons" id="cantDecisionButton" value="I cannot play" onClick={() => this.cannotPlay()}/>
  : 'Thanks for your response!' }

I tried something like the above but am getting errors so how can I place html inside a ternary in my react render method?

Radio- · Accepted Answer · 2016-11-14 14:48:52Z

5

JSX elements, like what your ternary expression returns when showThanks is true, always need one parent node. You have two inputs - they need a single parent, so enclose them in a div.

{ this.state.showThanks ? 
<div>
    <input type="submit" className="decisionButtons" id="canDecisionButton" value="I can play" onClick={() => this.canPlay()}/>
    <input type="submit" className="decisionButtons" id="cantDecisionButton" value="I cannot play" onClick={() => this.cannotPlay()}/>
</div>
  : 'Thanks for your response!' }

answered Nov 14, 2016 at 14:48

Radio-

3,18123 silver badges22 bronze badges

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

2 Comments

ProGrammer Over a year ago

I propose exchanging the <div> and </div> in the middle section of the ternary expression for React's <Fragment> and </Fragment> respectively. You can include Fragment in the import of React: import React, { Component, Fragment } from "react". It ensures the rendered HTML does not contain nested divs (which can sometimes lead to problems). Just thought I'd put it out there.

Parul Chauhan Over a year ago

does this work for multiple div or a combination of div & br

Collectives™ on Stack Overflow

Using a ternary operator to return HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related