How to display/hide section in screen

Question

I created a screen(B) that has a form and the values are passed as props to another screen(A). FROM SCREEN (B)

const addDetailItem = () => {
        if (title == null || category == null || caption == null || price == null) {
            Alert.alert('Error', 'Please fill in the item detail.')
        } else {
            navigation.navigate('AddPost', {details: detailItem});
            Keyboard.dismiss();
        };
    };

I would like the section i provided in screen(A) to ONLY be visible if values a passed from screen(B).

SCREEN(A)

const route = useRoute();

  const details = route.params?.details;

              <View style={{marginHorizontal: 20}}>
                <View style={{flexDirection: 'row', marginTop: 5,}}>
                  <Text style={{color: COLORS.primary2, ...FONTS.body3}}>Title: </Text>
                  <Text style={{color: COLORS.white, ...FONTS.body3}}>{details?.title}</Text>
                </View> 
                <View style={{flexDirection: 'row', marginTop: 5,}}>
                  <Text style={{color: COLORS.primary2, ...FONTS.body3}}>Category: </Text>
                  <Text style={{color: COLORS.white, ...FONTS.body3}}>{details?.category}</Text>
                </View>               
                <View style={{flexDirection: 'row', marginTop: 5,}}>
                  <Text style={{color: COLORS.primary2, ...FONTS.body3}}>Caption: </Text>
                  <Text style={{color: COLORS.white, ...FONTS.body3}}>{details?.caption}</Text>
                </View>
                <View style={{flexDirection: 'row', marginTop: 5,}}>
                  <Text style={{color: COLORS.primary2, ...FONTS.body3}}>Price: </Text>
                  <Text style={{color: COLORS.white, ...FONTS.body3}}>N{details?.price}</Text>
                </View>                
              </View>

Please help.

Answer 1

You can use conditional rendering with states.

If isPassed is true , your component will rendering.

const [isPassed, setIsPassed] = useState(false);

    return(
        <View>
        {
            isPassed &&
            <MyComponent/>
        }
        </View>
    )