Home > Back-end >  React Native hide <Text> if is not set to true
React Native hide <Text> if is not set to true

Time:08-19

How can i set my secondaryLabel from props as true and as false. If seondaryLabel is set to true than it shows the prop but when seondaryLabel is set to false it is hidden in the app

 type LabelProps = {
        label: string;
        secondaryLabel?: string;
    };
    
    export function FieldLabel({ secondaryLabel, label }: LabelProps) {
        return (
            <View>
                <Text>
                    {label}
                </Text>
                <Text>
                    {secondaryLabel}
                </Text>
            </View>
        );
    }

CodePudding user response:

You can use conditional Rendering / Ternary Operator in React Native.

Take a look at this:
https://reactjs.org/docs/conditional-rendering.html

Or SO:
Ternary operator in react-native

Basically its like this:

{secondaryLabel ? (<Text> blabla </Text>) : null } 

if secondaryLabel is true it shows the text if not it shows nothing

  • Related