Try to render data from Api using Hook in React-Native - react-native

Question

I'm new here and in react-native.
I want render some data from IMDB Api with the "hook" method.
So I try to render data in a flatlist, I can see in the console that the data is retrieved properly in a jSon format witch is a good thing but when I open my app I don't see any rendering on the screen.
I try to use the 'Hook' method and not the 'classes' and I'm pretty sure that I don't use properly the useState method.
So any help or advices are welcome.
My code:
App
import React, { useState } from "react";
import {
View,
Text,
StyleSheet,
Button,
TextInput,
FlatList,
} from "react-native";
// import films from "../Helpers/filmsData";
import FilmsItem from "./FilmsItem";
import getFilmsFromApiWithSearchedText from "../Api/TMDBApi";
const Search = () => {
const [films, setFilms] = useState([]);
const _loadFilms = () => {
getFilmsFromApiWithSearchedText("White").then(
(data) => setFilms({ film: data.results }),
console.log(films)
);
};
return (
<View style={styles.container}>
<TextInput style={styles.input} placeholder="Titre du film" />
<Button
style={styles.button}
title="Rechercher"
onPress={() => _loadFilms()}
/>
<FlatList
data={setFilms.films}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <FilmsItem films={item} />}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
},
input: {
marginLeft: 5,
marginRight: 5,
height: 50,
paddingLeft: 5,
borderWidth: 1,
borderColor: "#000000",
},
});
export default Search;
Api request:
// Api/TMDBApi.js
const API_TOKEN = "**************************";
const getFilmsFromApiWithSearchedText = (text) => {
const url =
"https://api.themoviedb.org/3/search/movie?api_key=" +
API_TOKEN +
"&language=en&query=" +
text;
return fetch(url)
.then((response) => response.json())
.catch((error) => console.error(error));
};
export default getFilmsFromApiWithSearchedText;
FilmItem:
import React from "react";
import { View, Text, StyleSheet, Image } from "react-native";
const FilmsItem = (props) => {
const film = props.film;
return (
<View style={styles.container}>
<Image style={styles.img} source={{ uri: "image" }} />
<View style={styles.content}>
<View style={styles.header}>
<Text style={styles.title}>{film.title}</Text>
<Text style={styles.vote}>{film.vote_average}</Text>
</View>
<View style={styles.synopsis}>
<Text style={styles.synopsysText} numberOfLines={6}>
{film.overview}
</Text>
</View>
<View style={styles.date}>
<Text style={styles.dateText}>Sorti le {film.release_date}</Text>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "row",
height: 190,
},
content: {
flex: 1,
margin: 5,
},
img: {
height: 180,
width: 120,
margin: 5,
backgroundColor: "gray",
},
header: {
flex: 3,
flexDirection: "row",
},
title: {
flex: 1,
flexWrap: "wrap",
fontWeight: "bold",
fontSize: 20,
paddingRight: 5,
},
vote: {
fontWeight: "bold",
fontSize: 20,
color: "#666666",
},
synopsis: {
flex: 7,
},
synopsysText: {
fontStyle: "italic",
color: "#666666",
},
date: {
flex: 1,
paddingBottom: 10,
},
dateText: {
textAlign: "right",
fontSize: 14,
},
});
export default FilmsItem;

Answer 1

const _loadFilms = () => {
getFilmsFromApiWithSearchedText("White").then(
(data) => setFilms({ film: data.results }),
console.log(films)
);
};
setFilms({ film: data.results }) will set an object, but you need an array in there.
Try to do something like this: setFilms(data.results)

Answer 2

use useState in this way
const _loadFilms = () => {
getFilmsFromApiWithSearchedText("White").then(
(data) => setFilms(data.results),
console.log(films)
);
};
then in Flatlist you can use like this
return (
<View style={styles.container}>
<TextInput style={styles.input} placeholder="Titre du film" />
<Button
style={styles.button}
title="Rechercher"
onPress={() => _loadFilms()}
/>
<FlatList
data={films}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => <FilmsItem films={item} />}
/>
</View>
);