Error with renderItem in React-native Flatlist

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

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.

Answer 2

change

renderItem={renderItem}

to

renderItem={this.renderItem}