Tengo una condición para la página de perfil. Quiero mostrar el nombre de los datos del perfil de usuario. edad, etc. Así que mapeo la matriz para obtener los datos de cada usuario, pero el problema es que cuando no hay datos en Firestore, esta página de perfil está vacía.
jsx expression must have one parent elementEntonces, ¿cómo se puede hacer esto correctamente?
return ( <SafeAreaView style={styles.container}> {values.map((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={tw("p-10 flex-row items-center justify-between px-5")}> <Pressable style={ tw('p-3 rounded-xl bg-red-400')} onPress={goedit}> <Text style={styles.text}>Edit Profile</Text> </Pressable> <Pressable style={ tw('p-3 rounded bg-red-400')} onPress={logout}> <Text style={styles.text}>LOGOUT</Text> </Pressable> </View> </SafeAreaView> )Quiero mostrar la página de perfil de usuario como plantilla, incluso si no hay datos en Firestore, ¿alguien puede ayudarme?
const renderValues = () => { values.map((value) => { if (value) { return ( <React.Fragment key={value.id}> <View style={styles.header} /> <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> ); } else { return <View>no data</View>; } }); }; return ( <SafeAreaView style={styles.container}> <> {renderValues()} <View style={tw('p-10 flex-row items-center justify-between px-5')}> <Pressable style={tw('p-3 rounded-xl bg-red-400')} onPress={goedit}> <Text style={styles.text}>Edit Profile</Text> </Pressable> <Pressable style={tw('p-3 rounded bg-red-400')} onPress={logout}> <Text style={styles.text}>LOGOUT</Text> </Pressable> </View> </> </SafeAreaView> );Simplemente agregue un <> en la parte superior del mapa y luego </> en la parte inferior para cerrarlo. Si necesita flexibilidad, puede cambiar el <></> por
Podría intentar algo como esto, pero pegue su lógica dentro de la declaración if:
const renderValues = () => { values.map((value) => { if (value) { return ( <View> <Text>data</Text> </View> ); } else { return <View>no data</View>; } }); }; return <>{renderValues()}</>;