How to create the sectiondata in the react native sectionlist - reactjs

Question

I want show the data from my API use Sectionlist in the react native
but I have no idea how to generate the sectionData.
I think my data is too complex to understand and let me confuse.
The struct like below
"Info": [
{
"Name": "test1",
"Data": [
{
"sss": "1215",
"aaa": "1010133000001",
},
{
"sss": "1215",
"aaa": "1010133000001",
}
]
},
{
"Name": "test2",
"Data": [
{
"sss": "1215",
"aaa": "1010133000001",
},
{
"sss": "1215",
"aaa": "1010133000001",
}
]
}
]
}
I want show the SectionHeader use Nameand show the Contents use Data.
Now I can get data use potion of code like below. How can I go on? Thank you!
for (let idx in jsonData) {
let Item = jsonData[idx];
console.log(Item.Name)
for (let index in Item.Data) {
Item2 = Item.Data[index];
console.log(Item2.sss)
}
}

Answer 1

First, you have to update your data array,
let newArray = []
for (let item in jsonData) {
let dict = {
title: item.Name,
data: item.Data
}
newArray.push(dict)
}
After the above code, you will get the array for section list.
Then use this like the following,
...
<SectionList
renderItem={({item, index, section}) => <Text key={index}>{item.sss}</Text>}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={this.state.data}
keyExtractor={(item, index) => item + index}
/>
...
The 'this.state.data' is your new array.
And renderItem is used for rendering section data
And renderSectionHeader is used for rendering section header.

Answer 2

provide an array of items, this will spit out the section data
// maps it's an array of objects
// groupBy to extract section headers
let dataSource = _.groupBy(maps, o => o.name);
// reduce to generate new array
dataSource = _.reduce(dataSource, (acc, next, index) => {
acc.push({
key: index,
data: next
});
return acc;
}, []);
return dataSource;