why is my flatlist not showing react native

Question

I created a FlatList filled with data from my file filmsData.js, but it isn't showing.

I feel like I did everything like my lesson explains so I dont understand why it's not showing.

class Search extends React.Component {
  render() {
    return (
      <View style={styles.main_container}>
        <TextInput style={styles.textinput} placeholder="Titre du film" />
        <Button title="Rechercher" onPress={() => {}} />

        <FlatList
          data={films}
          keyExtractor={(item) => item.id.toString()}
          renderItem={({ item }) => <FilmItem />}
        />
      </View>
    );
  }
}

Here is my filmsData.js

export default data = [
  {
    id: 181808,
    vote_average: 7.2,
    title: "Star Wars VIII - Les derniers Jedi",
    poster_path: "",
    original_title: "Star Wars: The Last Jedi",
    overview:
      "Nouvel épisode de la saga. Les héros du Réveil de la force rejoignent les figures légendaires de la galaxie dans une aventure épique qui révèle des secrets ancestraux sur la Force et entraîne de choquantes révélations sur le passé…",
    release_date: "2017-12-13",
  },
  {
    id: 181809,
    vote_average: 8.1,
    title: "La Guerre des étoiles",
    poster_path: "",
    original_title: "Star Wars",
    overview:
      "Il y a bien longtemps, dans une galaxie très lointaine... La guerre civile fait rage entre l'Empire galactique et l'Alliance rebelle. Capturée par les troupes de choc de l'Empereur menées par le sombre et impitoyable Dark Vador, la princesse Leia Organa dissimule les plans de l’Étoile Noire, une station spatiale invulnérable, à son droïde R2-D2 avec pour mission de les remettre au Jedi Obi-Wan Kenobi. Accompagné de son fidèle compagnon, le droïde de protocole C-3PO, R2-D2 s'échoue sur la planète Tatooine et termine sa quête chez le jeune Luke Skywalker. Rêvant de devenir pilote mais confiné aux travaux de la ferme, ce dernier se lance à la recherche de ce mystérieux Obi-Wan Kenobi, devenu ermite au cœur des montagnes désertiques de Tatooine...",
    release_date: "1977-05-25",
  },
];

and here is my FilmItems.js

import React from "react";
import { StyleSheet, View, Text } from "react-native";

class FilmItem extends React.Component {
  render() {
    return (
      <View style={styles.main_container}>
        <Text style={styles.title_text}>Titre du film</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main_container: {
    height: 190,
  },
  title_text: {},
});

export default FilmItem;

The goal is to get the films's data from filmsData.js and filling the flat list with it Thanks a lot for helping

Answer 1

Issue is in renderItem function. You need to forward item to FilmItem as a props:

renderItem={({ item }) => <FilmItem data={item}/>}

You can access the data prop like that in FilmItem component:

<Text style={styles.title_text}>{this.props.data.title}/Text>