How can conditional rendering for array map-CodePudding

I have condition for profile page I want to show user profile data name . age etc..So I map array to get each user data but problem is when there is no data in firestore , this profile page is empty this is really disappointed I want to conditional rendering the following rendering But error is

jsx expression must have one parent element

so how can render this correctly


  {   
       
       values.map(
         
        (value)=> value?(


      <React.Fragment key={value.id}>
      <View style={styles.header}></View>
      <Image style={styles.avatar} source={{uri : value.photo}}/>
       <View style={styles.body}>
         <View style={styles.bodyContent}>
        
          <Text style={styles.name}>{value.displayName}</Text>
             
              <View style={styles.label}>
                    <Text >My Job is - </Text>
                          <Text>{value.job}</Text>
              </View>
                         
                    <View style={styles.label}>
                    <Text>My Age is - </Text>
                          <Text >{value.age}</Text>
                      </View>
                      <View style={styles.label}>
                       <Text>My Gender is  - </Text>
                          <Text >{value.gender}</Text>
                        </View>
                        <View style={styles.label}>
                       <Text>I want to meet  - </Text>
                          <Text >{value.interestIn}</Text>
                         </View>
         </View>
        
       </View>

   </React.Fragment>
             
   ):(
    <View style={styles.header}></View>
    <Image style={styles.avatar} source={require("../logo.png")}/>
     <View style={styles.body}>
       <View style={styles.bodyContent}>
      
        <Text style={styles.name}>name</Text>
           
            <View style={styles.label}>
                  <Text >My Job is - </Text>
                        <Text>job</Text>
            </View>
                       
                  <View style={styles.label}>
                  <Text>My Age is - </Text>
                        <Text >age</Text>
                    </View>
                    <View style={styles.label}>
                     <Text>My Gender is  - </Text>
                        <Text >gender</Text>
                      </View>
                      <View style={styles.label}>
                     <Text>I want to meet  - </Text>
                        <Text >male</Text>
                       </View>
       </View>
      
     </View>
   )
   
   )
   
   
   }

I want to show user profile page as template even no data in firestore can someone help me

CodePudding user response：

Just add a <> ontop of the map and then </> on the bottom to close it. If you need flex then you can switch out the <></> for

CodePudding user response：

You could try something like this, but paste your logic inside if statement:

const renderValues = () => {
    values.map((value) => {
      if (value) {
        return (
          <View>
            <Text>data</Text>
          </View>
        );
      } else {
        return <View>no data</View>;
      }
    });
  };

  return <>{renderValues()}</>;