How can I return a dynamic text

Question

I did an "IF" to do dynamic text, if is null do show something,else shows another.But it is returning blank.What I did wrong ?

<View style={styles.rightContainer}>
    { () =>{        
        if(this.state.sicafSource.IdStatusManutencao == null){

            return(
                <View style={[{paddingHorizontal:10, marginTop:5,borderRadius:5},this.ReturnColor("Não achei na api","ATIVO")]}>
                        <Text style={[{ textAlign: 'right' }, styles.swipeCardRightTextS]}>
                                Sem informação 
                        </Text>
                </View>
            );

    }
    else{

        return(
            <View style={[{paddingHorizontal:10, marginTop:5,borderRadius:5},this.ReturnColor("Não achei na api","ATIVO")]}>
                <Text style={[{ textAlign: 'right' }, styles.swipeCardRightTextS]}>
                    api resposta true 
                </Text>
            </View>          

        );
    }
}
    }
</View>

Start by cleaning up your indentation to make your code more clear. Also, why is the `if` statement inside an anonymous function? — Code-Apprentice, Jun 05 '19 at 17:42

score 3 · Accepted Answer · answered Jun 05 '19 at 17:43

3

You need to use the ternary operator in JSX. Everything within {} needs to be an expression (something that returns a value). If's are a statement.

http://2ality.com/2012/09/expressions-vs-statements.html

{this.state.sicafSource.IdStatusManutencao == null ? (
    <div>Return this when true</div>
) : (
    <div>Return this when false</div>
)

answered Jun 05 '19 at 17:43

Cory Danielson

14,314
3
44
51

1

In addition to this, the fat arrow function `() => { ... }` is also not an expression. – Code-Apprentice Jun 05 '19 at 17:48

score 0 · Answer 2 · answered Jun 05 '19 at 17:53

One solution is to call your anonymous function so that the if statement can be evaluated:

() => {
  // ...
} () // add these

However using a ternary operator or boolean operators is cleaner. Instead of

if (A) {
  B;
} else {
  C;
}

You can do either

A ? B : C

or

A && B || C

How can I return a dynamic text

2 Answers2