ternary operator in jsx to include html with react
JavascriptReactjsJsxJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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..
Solution 2 - Javascript
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>
);
}
Solution 3 - Javascript
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>
)
}
)
Solution 4 - Javascript
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>
);
}
Solution 5 - Javascript
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.
Solution 6 - Javascript
For using variable inside ternary use brackets again
render() {
return(
<div className='searchbox'>
{this.state.var ? <div className='warning'>{this.state.var}</div> : ''}
</div>
)
}
Solution 7 - Javascript
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>
);