React-native I loop through it, but nothing comes out of the children - react-native

Question

I tried to show images and people's names using loops.
import { StyleSheet, Text, View, SafeAreaView, ScrollView } from 'react-native'
import React from 'react'
import Header from './home/Header'
import Stories from './home/Stories'
import Posts from './home/Posts'
import { POSTS } from '../data/posts'
const HomeScreen = () => {
return (
<SafeAreaView style={styles.container}>
<Header></Header>
<ScrollView>
<Stories></Stories>
{POSTS.map((post, index) => (
<Posts post={post} key={index}/>
))}
</ScrollView>
</SafeAreaView>
)
}
export default HomeScreen
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'black'
},
});
This is the one that has a problem.
import { Image, StyleSheet, Text, View } from 'react-native'
import {Divider} from 'react-native-elements'
import React from 'react'
const Posts = ({post, index}) => {
return (
<View stlye={styles.conatiner}>
<Divider width={1} orientation='vertical'></Divider>
<PostHeader post={post} key={index}/> <--- this part not show up
</View>
)
};
const PostHeader = ({post, index}) => {
<View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
<View>
<Image source={{ uri: post.profile_pictrue}} style={styles.story}/>
<Text style={{color: 'white'}}>{post.user.user}</Text>
</View>
</View>
};
const styles = StyleSheet.create({
conatiner: {
marginBottom: 30
},
story: {
width: 35,
height: 35,
borderRadius: 50,
marginBottom: 10,
borderWidth: 2,
borderColor: 'orange'
},
});
export default Posts
But the divider is working. And, there is no error log.
I don't understand what have I done wrong.

Answer 1

you need to wrap with return
const PostHeader = ({post, index}) => {
return( <View style={{flexDirection: 'row', justifyContent: 'space-between', margin: 5, alignContent: 'center'}} key={index}>
<View>
<Image source={{ uri: post.profile_pictrue}} style={styles.story}/>
<Text style={{color: 'white'}}>{post.user.user}</Text>
</View>
</View>)
};
hope it's working fine