Rendering a component with ternary expression

Question

I went to render a component using Ternary expression.

Currently I a doing something like this

 <View style={container}>
          { this.state.loaded ? 
                            (<VictoryChart
                    theme={VictoryTheme.material}
                    >
                    <VictoryArea
                        style={{ data: { fill: "#c43a31" } }}
                        data={this.coinHistoryData} 
                        x="cHT"
                        y="cHTVU"
                        domain={{ y: [0, 30000] }}
                    />
                    </VictoryChart>)
          : (<Text> Loading..</Text>)}  </View>

But this isn't working and Throwing an error saying Invariant Violation

ExceptionsManager.js:84 Unhandled JS Exception: Invariant Violation: Invariant Violation: Text strings must be rendered within a component.

[Question:] How Can I fix it and render an entire component inside Ternary expression

Ps: According to this stackoverflow question: This happens when we do inline conditional rendering.

Maybe try wrapping Text component in another component (e.g View) and see if it works? — Mμ., Sep 17 '18 at 21:12
Initially `this.state.loaded` is false so It should have rendered `( Loading..)` Also, Tried what you said it didn't work @Mμ. — Alwaysblue, Sep 17 '18 at 21:13
@davidhu2000 I did. Updated my question also it is answered now but still thanks for looking into it :) — Alwaysblue, Sep 17 '18 at 21:31

Sagiv b.g · Accepted Answer · 2018-09-17T21:38:25.027

I've seen it before in react-native.
There are 2 reasons i know of that will throw this error:

returning null / undefined (not your case i think)
spaces after the </Text> tag (i think this is it in your case)

So remove the spaces in the end:

<View style={container}>
          { this.state.loaded ? 
                            (<VictoryChart
                    theme={VictoryTheme.material}
                    >
                    <VictoryArea
                        style={{ data: { fill: "#c43a31" } }}
                        data={this.coinHistoryData} 
                        x="cHT"
                        y="cHTVU"
                        domain={{ y: [0, 30000] }}
                    />
                    </VictoryChart>)
          : (<Text> Loading..</Text>)}  </View> //<--- spaces are here

So this line

: (<Text> Loading..</Text>)}  </View>

Should be like this

: (<Text> Loading..</Text>)}</View>

...and that's why pattern `{condition && ()}{!condition && ()}` look safer for React Native. No extra text put by accident :) — skyboyer, Sep 17 '18 at 21:19

Rendering a component with ternary expression

1 Answers1