Impossible to display the data after a get request react native - reactjs

Question

i'm trying to display information of a restaurant in my react-native app after i get it by a get request from my database. I don't have problem getting the data, it's the display the problem.
Inside my component RestaurantDetailScreen :
componentDidMount() {
this.getRestaurantInfo()
}
getRestaurantInfo = async () => {
try {
let res = await axios({
method: 'get',
url: `${environment.apiDevUrl}/restaurant/${this.state.restaurantId}`,
})
this.setState({
restaurantInfo: res.data,
})
console.log(this.state.restaurantInfo.restaurant.nom);
} catch (error) {
console.error(error)
}
}
The console log display my state with correct data from my backend, but when I try to render it inside my Flatlist there is nothing to display:
<ScrollView style={styles.container}>
{/* <Text>{this.state.restaurantInfo.restaurant.nom}</Text> */}
<FlatList
data={this.state.restaurantInfo}
renderItem={this.renderRestaurantInfo}
keyExtractor={item => `${item.restaurant.id}`}
/>
<SectionList
sections={productData}
ItemSeparatorComponent={this.renderSeparator}
renderItem={this.renderRestaurantDetail}
renderSectionHeader={({section: {header}}) => (
<Text style={styles.sectionHeader}>{header}</Text>
)}
keyExtractor={(item, index) => `${item.id}` + index}
ref={ref => (this.sectionListRef = ref)}
getItemLayout={this.getItemLayout}
/>
</ScrollView>
So i've tried to simply display the name of a restaurant inside a Text component like in the getRestaurantInfo() method but it will return a undefined if i don't remove it.
The render method renderRestaurantInfo() :
renderRestaurantInfo = ({item}) => (
<View style={styles.containerRestaurantInfo}>
{console.log('item : ', item)}
<ItemRestaurantInfo
// image={item.restaurant.image}
title={item.restaurant.nom}
description={item.restaurant.description}
categories={item.restaurant.categorie}
adress={item.restaurant.adresse.rue1}
scheduleBeginning={item.restaurant.horaires.crenaux.hDebut}
scheduleEnd={item.restaurant.horaires.crenaux.hFin}
/>
</View>
)
And finally the ItemRestaurantInfo component :
ItemRestaurantInfo = ({
image,
title,
categories,
adress,
description,
scheduleBeginning,
scheduleEnd,
}) => {
return (
<View>
{/* <Image source={image} style={styles.topImage} /> */}
<View style={{padding: 15}}>
<Text style={styles.restaurantTitle}>{title}</Text>
<Text style={styles.restaurantInfoText}>{`${categories}`}</Text>
<View style={styles.viewInRow}>
<Image
style={{margin: 5}}
source={require('../../assets/icons/map-pin.png')}
/>
<Text style={styles.restaurantInfoText}>{adress}</Text>
</View>
<Text style={styles.restaurantInfoText}>{description}</Text>
<View style={styles.viewInRow}>
<Image
style={{margin: 5}}
source={require('../../assets/icons/calendar.png')}
/>
<Text style={styles.restaurantInfoText}>{scheduleBeginning} - {scheduleEnd}</Text>
</View>
</View>
</View>
)
}

Answer 1

You forget to pass item in your FlatList renderItem:
<FlatList
data={this.state.restaurantInfo}
renderItem={({item}) => this.renderRestaurantInfo(item)}
...
/>
You could also return a Component instead of method:
const RenderItems = ({ title }) => {
return (
<View>
<Text>{title}</Text>
</View>
);
}
...
// Pass the component to your FlatList
<FlatList
data={YOURDATA}
renderItem={({ item }) => <RenderItems title={item.title} />}
...
/>
And same thing goes for your SectionList
Edit: Working condeSandbox example with data fetch.

Answer 2

Ok I have finally find the solution, it was because my array restaurantInfo in the state was transform in an object when I use setState in the call of my backend... so inside the render method of the flatList there was no data.
OLD CODE
getRestaurantInfo = async () => {
try {
let res = await axios({
method: 'get',
url: `${environment.apiDevUrl}/restaurant/${this.state.restaurantId}`,
})
this.setState({
restaurantInfo: res.data,
})
} catch (error) {
console.error(error)
}
}
NEW CODE
getRestaurantInfo = async () => {
try {
let res = await axios({
method: 'get',
url: `${environment.apiDevUrl}/restaurant/${this.state.restaurantId}`,
})
let newArray = [...this.state.restaurantInfo];
newArray[0] = res.data
this.setState({
restaurantInfo: newArray,
})
console.log('state dans getResturantinfo:',this.state.restaurantInfo);
} catch (error) {
console.error(error)
}
}
With this syntax it force react to keep an array. And finally it was not necessery to use this syntax : renderItem={({item}) => this.renderRestaurantInfo(item)}
In my code I keep it like this :
<FlatList
data={this.state.restaurantInfo}
renderItem={this.renderRestaurantInfo}
keyExtractor={item => `${item.restaurant.id}`}
/>