My data is like this:
[
[
'id' => 1,
'date' => '2021-04-19',
'name' => 'John Doe',
'payment' => 25
],
[
'id' => 2,
'date' => '2021-04-19',
'name' => 'Mary Doe',
'payment' => 23
],
[
'id' => 3,
'date' => '2021-04-18',
'name' => 'Peter Pan',
'payment' => 30
],
[
'id' => 4,
'date' => '2021-04-18',
'name' => 'Mike Myers',
'payment' => 18
],
[
'id' => 5,
'date' => '2021-04-17',
'name' => 'Jack Cole',
'payment' => 28
]
]
I want an output like this:
2021-04-19
---------------------
| John Doe - 25 |
---------------------
| Mary Doe - 23 |
---------------------
2021-04-18
---------------------
| Peter Pan - 30 |
---------------------
| Mike Myers - 18 |
---------------------
2021-04-17
---------------------
| Jack Cole - 28 |
---------------------
In my render method I have this:
return (
<View style={styles.container}>
<FlatList
data={myjsondata}
keyExtractor={(item: any) => item.id}
renderItem={this._renderList}
showsVerticalScrollIndicator={false}
/>
</View>
);
My _renderList function is like this:
_renderList = ({item}:any) => {
return (
<View>
<Text>{item.date}</Text>
<TouchableOpacity>
<View>
<Text>
{item.name}
</Text>
<Text>
${item.payment}
</Text>
</View>
</TouchableOpacity>
</View>
);
};
I have tried using state but apparently it cannot be used inside the renderList loop. Can this be achieved through Flatlist, or should I use SectionList instead? Thanks in advance :)