Section List not displaying - react-native

Following the React-Native tutorial and I'm unable to get the data to show.
When I do a console.log my data appears like so:
Array [
Object {
"data": Object {
"address": "8753 2nd Street",
"id": "5507",
"inspection_date": "2019-03-27",
"inspection_time": "07:00:00",
"inspection_time_display": "07.00 AM",
"inspector": "Frank",
},
"key": "5507",
"title": "8753 2nd Street",
},
Object {
"data": Object {
"address": "11445 Paramount ave ",
"id": "5505",
"inspection_date": "2019-03-23",
"inspection_time": "10:30:00",
"inspection_time_display": "10.30 AM",
"inspector": "Fabian Hernandez",
},
"key": "5505",
"title": "11445 Paramount ave ",
},
]
I have the "data" and "title" sections as indicated in most tutorials.
My component is like this:
<Container>
<Header />
<Content>
<SectionList
renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
sections={this.state.dataSource}
keyExtractor={(item, index) => item + index}
/>
</Content>
</Container>
This is what I think is happening but I'm obviously wrong since something isn't adding up.
Looping through "sections"
renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
I'm expecting this above to get the "data".
Getting title:
renderSectionHeader={({section: {title}}) => (
<Text style={{fontWeight: 'bold'}}>{title}</Text>
)}
I'm expecting this above to get the "title". What am I missing or doing wrong?

I believe the data key in each of your section objects need to be an array unto itself. Example:
const mySectionedData = [
{
title: 'section 1',
data: [
{address: '123 street', name: 'me'},
{address: '456 street', name: 'you}
]
},
{
title: 'section 2',
data: [
{address: '789 street', name: 'us'}
]
}
]
This then lets you access {title, data} from each of your sections which allows the section list to then render your section header from title, and a list of items from the data array.
Hope that helps!

Related

How do I get to a nested array in React Native?

I'm trying to get to the nested array and more specifically to the "dishes" array through the map () method, but to no avail.
const RESTAURANTS = [
{
id: "1",
name: "Filada Family bar",
type: "Bakery",
rating: "5.0",
favorite: true,
hotOffer: true,
hotOfferPromo: require("../images/offers/offer_1.png"),
dishes: [
{
id: "1",
name: "Filada Family bar",
category: "cake",
type: "Asian food",
rating: "5.0",
distance: "0.2 km - $$ -",
image: require("../images/restaurants/restaurant_1.jpg"),
},
],
},
];
I usually only use the following code for the first array, but I need the data from the "dishes" array.
{RESTAURANTS.map((item) => (
<View key={item.id}>
<Text>{item.name}</Text>
</View>
))}
that is just plain javascript. You can either loop restaurants and get dishes or access a restaurant by the index in the array and get the result (or maybe search, filter whatever you need.)
access and index and the dishes property on the object:
{RESTAURANTS[0].dishes.map((item) => (
<View key={item.id}>
<Text>{item.name}</Text>
</View>
))}
Looping restaurants:
{RESTAURANTS.map((restaurant) => {
return restaurant.dishes.map((dish) => (
<View key={dish.id}>
<Text>{dish.name}</Text>
</View>
))
})}
What you need to understand here is that you have an array of objects. When mapping, the item variable means one of these objects that are being looped through and you can access any property like you would in a regular object.

How to use nested flatlist or sectionlist?

I'm trying to create nested flatlist but an error occurres while rendering. I couldn't see any mistake. My array is like (contains semesters and lectures in that semester)
Array [
Object {
"semester": "1",
"lectures": Array [
Object {
"grade": "BA",
"id": 0,
"lecture": "TÜRK DİLİ",
},
Object {
"grade": "DC",
"id": 2,
"lecture": "FIZIKI",
},
Object {
"grade": "AA",
"id": 4,
"lecture": "BİLGİSAYAR MÜHENDİSLİĞİNE GİRİŞ",
},
Object {
"grade": "BB",
"id": 6,
"lecture": "MATEMATIKI Zorunlu сс 6 İNGİLİZCE",
},
Object {
"grade": "DD",
"id": 8,
"lecture": "NESNEYE DAYALI PROGRAMLAMA",
},
Object {
"grade": "AA",
"id": 10,
"lecture": "WEB TEKNOLOJİLERİ",
},
],
},
]
And my flatlist component:
<FlatList
data={transcript}
renderItem={({ item }) => (
<View>
<Text>{item.semester}</Text>
<FlatList
data={item.lectures}
renderItem={({ item2 }) => (
<View>
<Text>{item2.lecture}</Text>
</View>
)}
keyExtractor={(item2) => item2.id.toString()}
/>
</View>
)}
keyExtractor={(item) => item.semester.toString()}
/>
Error that I get:
[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'item2.lecture')]
Anyway, <Text>HEY</Text> instead of <Text>{item2.lecture}</Text> works like expected.
When I use sectionlist like this
<SectionList
sections={transcript}
renderItem={({ item }) => <Text> {item.lecture}</Text>}
renderSectionHeader={({ section }) => <Text>{section.semester}</Text>}
keyExtractor={(item, index) => index}
/>
I get error
TypeError: undefined is not an object (evaluating 'items.length')
The issue here is that as per the official documentation the renderItem passes an object with three properties to the function - item, index, seperators. In the above code you are trying to de-structure a property called item2 which does not exist in the object as that property name is item.
So to keep separate name for both the renderItem methods you can rename the second item to item2 using this syntax:
renderItem={({ item: item2 })=>{}}
This will allow you to rename the property to item2 and it will work fine. You can further read about renaming destructured variable here Renaming de-structured Variable

Flatlist inside Flatlist : get data from the parent Flatlist

Im rendering multiple slides and each slide have a list of items.
so I had to render a Flatlist inside Flatlist like this:
<FlatList
ref={(list) => this.ref= list}
data={this.state.buttons} // parent data
keyExtractor={(item) => item.id.toString()}
...
getItemLayout={(data, index)=> (
{
length: wp('100%'),
offset: wp('100%') * index,
index,
borderWidth: 1, borderColor: 'red',
}
)}
showsHorizontalScrollIndicator={false}
renderItem={({item}) => {
let parentData = item;
let myData = this.state.listGifts + '.' + parentData.name;
console.warn('data ', parentData, item);
return (
<View style={{width: wp('100%')}}>
{
this.state.isLoading ?
<ActivityIndicator size='large' style={Styles.styleAI} color={Colors.mainYellow}/>
:
<FlatList
contentContainerStyle={Styles.flatContent}
data={myData}
// keyExtractor={(item) => item.id.toString()}
renderItem={this.renderItem}
removeClippedSubviews={true}
extraData={this.state}
/>
}
</View>
)
}
}
extraData={this.state}
/>
I fetch two JSON :
this.state.buttons >
{
"message": "",
"success": true,
"Category": [
{
"id": 2,
"name": "Peinture"
},
{
"id": 3,
"name": "Cuisine"
},
{
"id": 4,
"name": "Outils"
},
{
"id": 5,
"name": "Electromenager"
}
]
}
this.state.giftsList >
{
"message": "OK",
"success": true,
"Peinture": [
{
"idCadeau": 2,
"Cadeau": "Cadeau1",
"Unites": "100",
},
{
"idCadeau": 3,
"Cadeau": "Cadeau2",
"Unites": "1000",
},
{
"idCadeau": 4,
"Cadeau": "Cadeau3",
"Unites": "50",
}
],
"Cuisine": [
{
"idCadeau": 5,
"Cadeau": "Cadeau4",
"Unites": "200",
},
{
"idCadeau": 6,
"Cadeau": "Cadeau5",
"Unites": "2500",
}
],
"Outils": [
{
"idCadeau": 7,
"Cadeau": "Cadeau6",
"Unites": "100",
}
],
"Electromenager": [
{
"idCadeau": 9,
"Cadeau": "Cadeau7",
"Unites": "500",
}
]
}
for the second Flatlist (the child), I try to get data like this (see code below) :
let myData = this.state.listGifts + '.' + parentData.name;
...
data={myData}
but it doesn't work ! I comment this // keyExtractor={(item) => item.idCadeau.toString()} because it give an error and then it give me an empty list .
**
what I want is set data like this :
**
data={this.state.listGifts.Peinture}
data={this.state.listGifts.Cuisine}
data={this.state.listGifts.Outils}
...
If this.state.listGifts is an object then I believe you mean to do something like this:
let myData = this.state.listGifts[parentData.name];

Pass a couple of values in RadioGroup

Used react-native-flexi-radio-button https://github.com/thegamenicorus/react-native-flexi-radio-button for radio buttons which is awesome but wondering if other values can be passed like index and value props.
For instance Here we can get the selected index and selected value. But I wonder whether I can pass other props (like id from json below) to the radioGroup as well too. I want to pass the id as well. How can I do that?
onSelect(index, value) {
console.log('selected index and value', index + value);
}
<View style={styles.border}>
<RadioGroup
onSelect={(index, value) => this.onSelect(index, value)}
>
{this.state.foodList.map(item1 => {
return (
<RadioButton value={item1.food}>
<Text>{item1.food}</Text>
</RadioButton>
);
})}
</RadioGroup>
</View>
Json data
{"foodList": [
{
"id": 40,
"food": "Bagels",
},
{
"id": 27,
"food": "Beverage",
},
{
"id": 5,
"food": "Burger",
}
]}

React Native - Map function inside of another map function?

I have this array of data that have 4 objects, and after selecting manually one of this, I don't know how to get all the information inside. For example I want all the data that is inside 'pois' (another array)...I was thinking that should be something like this:
{api.monuments.map((monumento, index) => (
{monumento.pois.map((poi, index2) => (
<TouchableHighlight
onPress={() => this.onClick(convento)}
style={styles.monumentoContainer}
key={index2}
>
<Image style={styles.monumentoPic} source={{uri:'http://192.168.56.1:3000/'+poi.image}}>
<View style={styles.monumentoTitleContainer}>
<Text style={styles.monumentoTitle}>{poi.name}</Text>
</View>
</Image>
</TouchableHighlight>
))}
))}
But it's not - image of the error, so how can I do it?
Another question is: since I have an array with 4 objects, and each one have a specific category, how can I select only the object that have the 'category' == 'xxxxx'?
Hope you can help me! Thank you
You can do it as follows:
var api = [
{
category: "Cat_name",
monuments: [
{
item: 'item1',
pois: [
{name: 'poi1'},
{name: 'poi2'},
{name: 'poi3'},
{name: 'poi4'}
]
}
]
},
{
category: "Cat_name1",
monuments: [
{
item: 'item2',
pois: [
{name: 'poi5'},
{name: 'poi6'},
{name: 'poi7'},
{name: 'poi8'}
]
}
]
}
]
To get all pois you can do something as follows:
{api.map(i => i.monuments.map(j => j.pois.map(k => k.name)))}
And if you want to check for category name you can do something like:
{data.map(i => {
if (i.category === "Cat_name1"){
return i.monuments.map(j => j.pois.map(k => k.name))
}
})}
Here is fiddle.