I wanted to know if its possible to do nested if else if in ReactJS JSX?
I have tried various different ways and I am unable to get it to work.
I am looking for
if (x) {
loading screen
} else {
if (y) {
possible title if we need it
}
main
}
I have tried this but I can not get it to render. I have tried various ways. It always breaks once I add the nested if.
{
this.state.loadingPage ? (
<div>loading page</div>
) : (
<div>
this.otherCondition && <div>title</div>
<div>body</div>
</div>
);
}
Update
I ended up choosing the solution to move this to renderContent and call the function. Both of the answers did work though. I think I may use the inline solution if it is for a simple render and renderContent for more complicated cases.
Thank you
if
/else
constructs aren't "loops"(<div>body</div>)
part doesn't seem to belong to anything. That's an error. Otherwise what you have seems fine.foo ? bar : baz abc
is not valid JavaScript. You want<div>{this.state.someBoolean ? ... : ...}<div>body</div></div>
then.4 5
is simply invalid. That's not a problem for statements.