React Native Datatable doesn't show after moving the fragment into Component - react-native

Question

I've created the following component. React Native Paper Datatable rows aren't showing after moving it into component and linking it to json loop.
If we comment " and uncommented the commented block below, you will see the Datatable is showing. What am I doing wrong with my two components? I've done all console.log. All data are showing correctly but JSX elements aren't rendering inside Datatable.
I've created the following code on Snack: https://snack.expo.dev/#everestster/datatable-component
import React, {useEffect} from 'react';
import type {Node} from 'react';
import {View, ScrollView, Text, StyleSheet, Dimensions} from 'react-native';
import {DataTable as PaperDataTable} from 'react-native-paper';
const DataTable = props => {
const optionsPerPage = [2, 3, 4];
const [page, setPage] = React.useState(0);
const [itemsPerPage, setItemsPerPage] = React.useState(optionsPerPage[0]);
useEffect(() => {
setPage(0);
}, [itemsPerPage]);
const HeaderSection = (): Node => {
console.log(props.items);
if (props.items.length === 0) {
return;
}
return (
<PaperDataTable.Header>
{Object.keys(props.items[0]).forEach(function (key) {
if (key !== 'Id') {
<PaperDataTable.Title style={[styles.allCell]}>
{key}
</PaperDataTable.Title>;
}
})}
</PaperDataTable.Header>
);
};
const BodySection = (): Node => {
return (
<PaperDataTable.Row>
{Object.keys(props.items[0]).forEach(function (key) {
if (key !== 'Id') {
<PaperDataTable.Cell style={[styles.allCell]}>
{key}
</PaperDataTable.Cell>;
}
})}
</PaperDataTable.Row>
);
};
return (
<ScrollView style={styles.tableHolder}>
<ScrollView horizontal={true}>
<View style={{alignItems: 'center'}}>
<PaperDataTable style={styles.table}>
<HeaderSection />
<BodySection />
{/*<PaperDataTable.Header>
<PaperDataTable.Title>Name</PaperDataTable.Title>
<PaperDataTable.Title>Email</PaperDataTable.Title>
</PaperDataTable.Header>
<PaperDataTable.Row>
<PaperDataTable.Cell>John</PaperDataTable.Cell>
<PaperDataTable.Cell>john#gmail.com</PaperDataTable.Cell>
</PaperDataTable.Row>
<PaperDataTable.Row>
<PaperDataTable.Cell>Harry</PaperDataTable.Cell>
<PaperDataTable.Cell>harr#gmail.com</PaperDataTable.Cell>
</PaperDataTable.Row>
<PaperDataTable.Row>
<PaperDataTable.Cell>Jessica</PaperDataTable.Cell>
<PaperDataTable.Cell>jessica#gmail.com</PaperDataTable.Cell>
</PaperDataTable.Row>*/}
<PaperDataTable.Pagination
page={page}
numberOfPages={1}
onPageChange={p => setPage(p)}
optionsPerPage={optionsPerPage}
itemsPerPage={itemsPerPage}
setItemsPerPage={setItemsPerPage}
showFastPagination
optionsLabel={'Rows per page'}
/>
</PaperDataTable>
</View>
</ScrollView>
</ScrollView>
);
};
const styles = StyleSheet.create({
tableHolder: {},
table: {
paddingLeft: 50,
paddingRight: 50,
flex: 1,
},
allCell: {
marginRight: 20,
},
});
export {DataTable};
Any help will be appreciated.

Answer 1

The problem is in your structure. Your current BodySection is not returning the correct structure react-native-paper wants. I rewrote the BodySection function. Here is the snack: https://snack.expo.dev/#truetiem/datatable-component
const BodySection = (): Node => {
return props.items.map(function (item) {
return (
<PaperDataTable.Row>
{Object.keys(item).map((key) => key === 'Id' ? null : (
<PaperDataTable.Cell>
{item[key]}
</PaperDataTable.Cell>
))}
</PaperDataTable.Row>
);
});
};