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

Answer 1

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' ? (
      

        three elements wrapped
        inside
        another element work.
      
    ) : (
      html like
      haiku
      must follow rules of structure.
    )
  }
)