Discussion on: Nested Ternary statements in React JSX

[Nathan Dixon]

Another option is to do an inline JSX functional component:

<h1>Data Loader!</h1>
        { () => {
            if (this.state.loading) { 
                return (<h2>It is Loading.</h2>)
            } else {
                if (this.state.data) { 
                    return (<h2>{this.state.data}</h2>)
                } else {
                    return <h2>There was no result!</h2> 
                }
            }
        }

[Jose Browne]

For others running into this issue the above won't work unless it's immedietly invoked

{(() => {
  ...
})()}