Error with renderItem in React-native Flatlist - react-native

Question

I'm trying to set up a flatlist to test it on a screen in React-native.
When I launch the emulator I'm getting this error : "Can't find variable renderItem" but I don't really know what's wrong with my code. It seemed that I had every element.
Is there someone that can help me ? Thanks a lot for any explanations or answer you can give to help.
import React, { Component } from "react";
import { Header } from "react-native-elements";
import {
FlatList,
SafeAreaView,
StatusBar,
StyleSheet,
Text,
ImageBackground,
View,
ScrollView,
Image,
TouchableOpacity
} from "react-native";
import i18n from "../../src/i18n";
import styles from "../../assets/Styles/Styles";
const DATA = [
{
id: "bd7acbea-c1b1-46c2-aed5-1",
title: "Test 1",
},
{
id: "3ac68afc-c605-48d3-a4f8-2",
title: "Test 2",
},
{
id: "58694a0f-3da1-471f-bd96-3",
title: "Test 3",
},
{
id: "58694a0f-3da1-471f-bd96-4",
title: "Test 4",
},
{
id: "58694a0f-3da1-471f-bd96-5",
title: "Test 5",
},
{
id: "58694a0f-3da1-471f-bd96-6",
title: "Test 6",
},
{
id: "58694a0f-3da1-471f-bd96-7",
title: "Test 7",
},
{
id: "58694a0f-3da1-471f-bd96-8",
title: "Test 8",
},
{
id: "58694a0f-3da1-471f-bd96-9",
title: "Test 9",
},
];
const Item = ({ item, onPress, style }) => (
<TouchableOpacity onPress={onPress} style={[styles.flightsListitem, style]}>
<Text style={styles.h3}>{item.title}</Text>
</TouchableOpacity>
);
export default class FlightsList extends Component {
constructor(props) {
super(props);
this.state = {
selectedId: '',
setSelectedId:''
}
};
renderItem = ({ item }) => {
const backgroundColor = item.id === selectedId ? "transparent" : "fff";
return (
<Item
item={item}
onPress={() => setSelectedId(item.id)}
style={{ backgroundColor }}
/>
);
};
render() {
return (
<ImageBackground
source={require("../../assets/images/background.jpg")}
style={styles.backgroundImage}
>
<Header
backgroundImage={require("../../assets/images/bg-header.png")}
backgroundImageStyle={{
resizeMode: "stretch",
}}
centerComponent={{
text: i18n.t("mytrips.title"),
style: styles.headerComponentStyle,
}}
containerStyle={[styles.headerContainerStyle, { marginBottom: 0 }]}
statusBarProps={{ barStyle: "light-content" }}
/>
<ScrollView style={styles.containerScrollNoMargins}>
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={renderItem}
keyExtractor={(item) => item.id}
extraData={selectedId}
/>
<TouchableOpacity
style={styles.touchable2}
onPress={() => this.props.navigation.goBack()}
>
<View style={styles.view2}>
<Text style={styles.textimg2}>
{i18n.t("tripsform.action.back")}
</Text>
</View>
<Image
source={require("../../assets/images/btn-background.png")}
style={styles.tripsimg2}
/>
</TouchableOpacity>
</SafeAreaView>
<Text>{"\n"}</Text>
</ScrollView>
</ImageBackground>
);
};
}

Answer 1

change
renderItem={renderItem}
to
renderItem={this.renderItem}

Answer 2

You must use renderItem={this.renderItem}
Because your renderItem function is not a variable or inner function of your render function. So, you must use this when you're trying to call another function of your class.