can't show data from web api with flatlist or map it to custom component-CodePudding

I'm trying to show movies in the screen from tmdb.

I can show the data in a map function with a text inside, but I can't show the data with a custom component passing props. Also I can't use Flatlist neither to show data.

this is how i get the data and set my state:

const \[moviesList, setMoviesList\] = useState();

const getNowPlayingMovies = async () =\> {
await axios
.get(
'https://api.themoviedb.org/3/movie/now_playing?api_key=<api_key>&language=en-US&page=1'
)
.then((result) =\> setMoviesList(result.data.results));
console.log('CONSOLE', moviesList);

sample of my console:


CONSOLE undefined
LOG  CONSOLE \[{"adult": false, "backdrop_path": "/ugS5FVfCI3RV0ZwZtBV3HAV75OX.jpg", "genre_ids": \[16, 878, 28\], "id": 610150, "original_language": "ja", "original_title": "ドラゴンボール超 スーパーヒーロー", "overview": "The Red Ribbon Army, an evil organization that was once destroyed by Goku in the past, has been reformed by a group of people who have created new and mightier Androids, Gamma 1 and Gamma 2, and seek vengeance against Goku and his family.", "popularity": 763

getNowPlaying movies is in a useEffect and also i can trigger it with a button.

Now my problem is I can show the data using map function:


      {moviesList ? (
        moviesList.map((movie) => (
          <View>
            <Text>{movie.title}</Text>
          </View>
        ))
      ) : (
        <Text>Loading</Text>

Can't show it with custom component:


{moviesList ? (
moviesList.map((movie) =\> \<ShowMoviesV2 movie={movie} /\>)
) : (
\<Text\>Loading\</Text\>
)}

My component:


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

function ShowMoviesV2(props) {
return (
\<View\>
\<Text\>{props.title}\</Text\>
\</View\>
);
}

export default ShowMoviesV2;

and finally Flatlist:


\<FlatList
data={moviesList}
keyExtractor={(item) =\> String(item.id)}
renderItem={renderMovies}
/\>

When I convert item.id to string i finally got some data on the screen but all I only got the text "undefined". How can I proceed from this ? Thank you for reading.

Edit: renderMovies component:

const renderMovies = ({ item }) => <ShowMoviesV2 movies={item} />;

CodePudding user response：

Have you tried accessing the title using props.movie.title?

CodePudding user response：

Thanks everyone for their time and suggestions. I made all the changes everyone suggested and now I can show the data using both Flatlist and using map with custom component. Thak you so much! Here is my last code: Flatlist:

      <FlatList
    data={moviesList}
    keyExtractor={(item) => String(item.id)}
    renderItem={renderMovies}
  />

ShowMoviesV2:

function ShowMoviesV2(props) {
  return (
   <View>
    <Text>{props.movies.title}</Text>
  </View>
  );
}

Map with custom component:

{moviesList ? moviesList.map((item) => <ShowMoviesV2 movies={item} />) : <Text>Loading</Text>}