Question 34229 in React native Question posted in
The official React Native documentation can be found here.

If Statement in React Native

I’m having issues writing an If statement in React Native.
I’m building the mobile version of my React Js project where I already have the "if" statement but I’m not being able to write it in Native.

Here is what I got so far:

{renderItems && (
        <FlatList
        data={data}
        keyExtractor={(item)=>{return item.date}}
        numColumns={numberOfCols}
        renderItem={({item})=>(

        #######################################
       if (item.copyright "exists" return (
       <Image source(require(a specific local image)/>
        else( return the code below
        #######################################

          <View style={styles.viewpic}>
              <TouchableOpacity onPress={() => navigation.navigate('ImageDetails', 
         item)}>
            <Image 
            style={{
    height: 104,
    width: square - 20,
    margin: 10,
    borderWidth: 1,
    borderColor:'white',
    borderRadius:2,
    
    }} 
    source={{uri:item.url}}/>
    </TouchableOpacity>
          </View>
        )}
        />)
      }

the code works fine without the if part. I tried a few combos with "{" ,"(" ,"({" but nothing worked.

Thanks everyone for your help!
Cheers,

Tags:

2

Answers


  1. 0

    here

    {renderItems && 
        <FlatList
        data={data}
        keyExtractor={(item)=>{return item.date}}
        numColumns={numberOfCols}
        renderItem={({item})=>(     
       item.copyright== "exists" ? 
       <Image source(require(a specific local image)/>
       :<View style={styles.viewpic}>
        <TouchableOpacity onPress={() =>  navigation.navigate('ImageDetails', item)}>
        <Image style={{
                        height: 104,
                        width: square - 20,
                        margin: 10,
                        borderWidth: 1,
                        borderColor:'white',
                        borderRadius:2,
                        
                        }} 
                     source={{uri:item.url}}/>
             </TouchableOpacity>
            </View>)}
        
        />
      }
    Login or Signup to reply.
  2. 0

    Yes, there seem to be some missing brackets. I would create a separate function like check() for the if statements and let it return the JSX elements instead:

    
    const check = (item) => {
        if (item.copyright === "exists") {
            return (
                <Image source={require('a specific local image')}/>
            )
        }
        else {
            return (
                <View style={styles.viewpic}>
                    <TouchableOpacity onPress={() => navigation.navigate('ImageDetails', item)}>
                        <Image style={{
                                height: 104,
                                width: square - 20,
                                margin: 10,
                                borderWidth: 1,
                                borderColor:'white',
                                borderRadius:2,

                            }} 
                            source={{uri:item.url}}
                        />
                    </TouchableOpacity>
                </View>
            )
        }
    }

    {renderItems && (
        <FlatList
            data={data}
            keyExtractor={(item)=>{return item.date}}
            numColumns={numberOfCols}
            renderItem={({item})=>(
                check(item)
            )}
        />
    )}

    If you do not want a separate function you have to write the function in the Flatlist’s renderItem a little bit different:

    
    <FlatList
            data={data}
            keyExtractor={(item)=>{return item.date}}
            numColumns={numberOfCols}
            renderItem={({item})=> {
                if (item.copyright === "exists") {
                    return (
                      <Component1/>
                    )
                }
                else {
                    return (
                      <Component2/>                
                    )
                }
            }    
        }
    />

    But still check for the brackets. They should all be correct in the first code snippet though.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search