react-native section list data formate Question? - react-native

Question

How can I show the below array of objects in section list in react-native
"RequiredPictures":{
"Additional product ":[
{
"required_picture_id":"001",
"label":"MRI",
"has_picture":true,
"url":"https:bbymakeitright.png"
},
{
"required_picture_id":"002,
"label":"MR",
"has_picture":true,
"url":"https:bbymakeitright.png"
}
],
"Additional product two":[
{
"required_picture_id":"003",
"label":"IMR",
"has_picture":true,
"url":"https:bbymakeitright.png"
},
{
"required_picture_id":"004",
"label":"IR",
"has_picture":false,
"url":""
}
]
}
I want to show "Additional product" and 'Additional product two" as the title of section and label in the object as the content item. How can I do so? Should I convert to any other formate to show it in the section list react-native?

Answer 1

First of all, you need to convert your data according to the format which supports by SectionList in React Native.
let RequiredPictures = {
"Additional product": [
{
"required_picture_id": "001",
"label": "MRI",
"has_picture": true,
"url": "https:bbymakeitright.png"
},
{
"required_picture_id": "002",
"label": "MR",
"has_picture": true,
"url": "https:bbymakeitright.png"
}
],
"Additional product two": [
{
"required_picture_id": "003",
"label": "IMR",
"has_picture": true,
"url": "https:bbymakeitright.png"
},
{
"required_picture_id": "004",
"label": "IR",
"has_picture": false,
"url": ""
}
]
}
let newData = [
{ title: Object.keys(RequiredPictures)[0], data: RequiredPictures[Object.keys(RequiredPictures)[0]] },
{ title: Object.keys(RequiredPictures)[1], data: RequiredPictures[Object.keys(RequiredPictures)[1]] },
]
console.log(newData)
Then you can use that data to display your Sectionlist
import React, { Component } from 'react';
import { SectionList, Text, SafeAreaView } from 'react-native';
const RequiredPictures = {
"Additional product": [
{
"required_picture_id": "001",
"label": "MRI",
"has_picture": true,
"url": "https:bbymakeitright.png"
},
{
"required_picture_id": "002",
"label": "MR",
"has_picture": true,
"url": "https:bbymakeitright.png"
}
],
"Additional product two": [
{
"required_picture_id": "003",
"label": "IMR",
"has_picture": true,
"url": "https:bbymakeitright.png"
},
{
"required_picture_id": "004",
"label": "IR",
"has_picture": false,
"url": ""
}
]
}
export default class App extends Component {
render() {
let newData = [
{ title: Object.keys(RequiredPictures)[0], data: RequiredPictures[Object.keys(RequiredPictures)[0]] },
{ title: Object.keys(RequiredPictures)[1], data: RequiredPictures[Object.keys(RequiredPictures)[1]] },
]
return (
<SafeAreaView style={{ flex: 1, marginTop: 20 }}>
<SectionList
sections={newData}
keyExtractor={(item, index) => item + index}
renderSectionHeader={({ section }) => (
<Text style={{ fontSize: 20, backgroundColor: 'gray' }}>{section.title}</Text>
)}
renderItem={({ item }) => <Text>{item.label}</Text>}
/>
</SafeAreaView>
);
}
}
Hope this helps you. Feel free for doubts.

Answer 2

Try below
const sections = [
{
title: "Additional product",
data: [
{
"required_picture_id":"001",
"label":"MRI",
"has_picture":true,
"url":"https:bbymakeitright.png"
},
{
"required_picture_id":"002,
"label":"MR",
"has_picture":true,
"url":"https:bbymakeitright.png"
}
],
},
{
title: "Additional product two",
data: [
{
"required_picture_id":"003",
"label":"IMR",
"has_picture":true,
"url":"https:bbymakeitright.png"
},
{
"required_picture_id":"004",
"label":"IR",
"has_picture":false,
"url":""
}
]
}
];
<SectionList sections={sections} />