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

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 has 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 divider is work what did i wrong?

and there is not any error log..

I don't understand what have I done wrong?

**but divider is work what did i wrong?

and there is not any error log..

I don't understand what have I done wrong?

CodePudding user response：

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