Ad

React Native: Switch/(Un)Hide Components - Conditional

First time doing React Native. I am trying to switch the components by statement if const video = undefined/null. So if someone can give a hand about that, please. Thank you.

I would like to

  • if 'video' obj is undefined/null then to - hide className="Video"(the WebView component) and hide "gallerySecond" and show "galleryFirst"

  • if there's data at the video obj: then would like to hide "galleryFirst" and show gallerySecond and show the video (WebView component)

    export const video = 'DyDfgMOUjCI';

              <WebView
                style={{ width: 360, height: 250 }}
                javaScriptEnabled={true}
                className="Video"
                domStorageEnabled={true}
                source={{ uri: "https://www.youtube.com/embed/"+{video}}}
              />
            </View>
    
            <Gallery className="galleryFirst" style={{position: "relative", flexDirection: "row" }}/>
    
            <View style={styles.description}>
                <Text style={styles.descriptiontext}>
                    Some Text
                </Text>
            </View>
    
            <Gallery className="gallerySecond" style={{position: "relative", flexDirection: "row" }}/>
    
Ad

Answer

    {video?<WebView
        style={{ width: 360, height: 250 }}
        javaScriptEnabled={true}
        className="Video"
        domStorageEnabled={true}
        source={{ uri: "https://www.youtube.com/embed/"+{video}}}
      />:null}
    </View>

    {!video?<Gallery className="galleryFirst" style={{position: "relative", flexDirection: "row" }}/>:null}

    <View style={styles.description}>
        <Text style={styles.descriptiontext}>
            Some Text
        </Text>
    </View>

    {video?<Gallery className="gallerySecond" style={{position: "relative", flexDirection: "row" }}/>:null}
Ad
source: stackoverflow.com
Ad