Problems with ifs in React Native

Question

Good afternoon! I have a javascript code for an application in React, but for some reason my IDE is error in a line where a else of a if, but I don’t know how to fix it!

The error is found in orange.

Probably the mistake is very stupid, but I’m new to javascript!

<View style={styles.form}>
    { showBox ? colorBox == "warm" ? <View style={styles.boxWarm}><Text style={styles.boxWarmText}>{boxText}</Text></View> : colorBox == "error" ? 
        <View style={styles.boxError}><Text style={styles.boxWarmText}>{boxText}</Text></View> : <View style={styles.boxOk}><Text style={styles.boxWarmText}>{boxText}</Text></View> : null }
    { showContent ?
        <Text style={styles.label}>INSIRA A NOVA PASSWORD:</Text>
        <TextInput
            style={styles.input}
            textContentType="password"
            placeholder="Introduza a nova password"
            secureTextEntry={true}
            placeholderTextColor="#999"
            value={newPass}
            ref={(input) => this.newpass = input}
            onChangeText={pass => hideInfoDuringTyping(pass, "newpass") }
            onSubmitEditing={() => this.renewpass.focus()}
        />
        <Text style={styles.label}>INSIRA A NOVA PASSWORD:</Text>
        <TextInput
            style={styles.input}
            textContentType="password"
            placeholder="Introduza novamente a nova password"
            secureTextEntry={true}
            placeholderTextColor="#999"
            value={renewpass}
            ref={(input) => this.renewpass = input}
            onChangeText={pass => hideInfoDuringTyping(pass, "renewpass") }
            onSubmitEditing={handleRecover}
        />

: null }

        { showInfo ? 
            <Text style={colorInfo == "warm" ? styles.infoWarm : colorInfo == "error" ? styles.infoError : styles.infoOk }>{infoText}</Text> : null }
        <TouchableHighlight onPress={handleRecover} style={styles.buttonMain}><Text style={styles.buttonTextMain}>Alterar a password</Text></TouchableHighlight>
        <TouchableHighlight onPress={startSession} style={styles.buttonSecundary}><Text style={styles.buttonTextSecundary}>{btnTxt}</Text></TouchableHighlight>
</View>

Answer 1

For in the javascript react is not accepted more than one tag as return.

that is to say:

This can be done here:

{ showContent ?
<View>
 <Text style={styles.label}>INSIRA A NOVA PASSWORD:</Text>
 <TextInput
    style={styles.input}
    textContentType="password"
    placeholder="Introduza a nova password"
    secureTextEntry={true}
    placeholderTextColor="#999"
    value={newPass}
    ref={(input) => this.newpass = input}
    onChangeText={pass => hideInfoDuringTyping(pass, "newpass") }
    onSubmitEditing={() => this.renewpass.focus()}
 />
 ...
</View>
: null }

for the return of the condition is only one tag, in the case View, the example below shows an error when returning two tags instead of one encapsulating them.

{ showContent && <Text>Oi</Text><Text>Tomas</Text> : null }

a tip, you can use && to return a true case condition, eliminating the : null of your ex code:

{ showContent &&
  <View>
   <Text style={styles.label}>INSIRA A NOVA PASSWORD:</Text>
    <TextInput
       style={styles.input}
       textContentType="password"
       placeholder="Introduza a nova password"
       secureTextEntry={true}
       placeholderTextColor="#999"
       value={newPass}
       ref={(input) => this.newpass = input}
       onChangeText={pass => hideInfoDuringTyping(pass, "newpass") }
       onSubmitEditing={() => this.renewpass.focus()}
    />
    ...
  </View> 
}