I am trying to render the API data onto the page but get this error |undefined is not a function (near '...movies.map...')| how can i stamp my result in the page ? why in movie.title give me red error?

import { StatusBar } from 'expo-status-bar';
import React ,{useState,useEffect} from 'react';
import {ActivityIndicator, FlatList, Text,View} from 'react-native'
import MovieBox from '../components/MovieBox';
import { Ionicons } from '@expo/vector-icons';
import styled from 'styled-components/native'
import Header from '../components/Header';
   
export default function Home() {
const apiPath = "https://api.themoviedb.org/3/movie/popular? 
 api_key=i don't want to show"
 
const [movies,setMovies]=useState<any[]>([])
  useEffect(()=>{
    fetch(apiPath)
    .then(response=>response.json())
    .then(res=>setMovies(res))
    .catch(err=> console.log(err))
    
  },[])
  
  return (
    
    <>
      <StatusBar 
      translucent 
      backgroundColor='transparent' 
      
      />
      <Container>
          <Text>
              
              {
                movies.map(movie=>(
                  <Text>{movie.title}</Text>
                ))
              }
              
          </Text> 


         <Header/>
          
      </Container>
        
    </>
  )
}

CodePudding user response：

The problem:

moviedb api v3 return an object with a results array like this example:

{
    "page": 1,
    "results": [
        {
            "adult": false,
            "backdrop_path": "/2RSirqZG949GuRwN38MYCIGG4Od.jpg",
            "genre_ids": [
                53
            ],
            "id": 985939,
            "original_language": "en",
            "original_title": "Fall",
            "overview": "For best friends Becky and Hunter, life is all about conquering fears and pushing limits. But after they climb 2,000 feet to the top of a remote, abandoned radio tower, they find themselves stranded with no way down. Now Becky and Hunter’s expert climbing skills will be put to the ultimate test as they desperately fight to survive the elements, a lack of supplies, and vertigo-inducing heights",
            "popularity": 8806.711,
            "poster_path": "/spCAxD99U1A6jsiePFoqdEcY0dG.jpg",
            "release_date": "2022-08-11",
            "title": "Fall",
            "video": false,
            "vote_average": 7.5,
            "vote_count": 951
        }
    ],
    "total_pages": 35227,
    "total_results": 704530
}

That's why you get an error when you try to map from an object non array.

Solution:

To fix it you need to setMovies from res.results like this:

  useEffect(()=>{
    fetch(apiPath)
    .then(response=>response.json())
    .then(res=> setMovies(res.results))
    .catch(err=> console.log(err));
  },[]);

Notes:

1- I couldn't find any imports for your Container.

2- I prefer you change the map location and make it inside the View instead of the text like this:

      <View>
              {
                movies.map(movie=>(
                  <Text>{movie.title}</Text>
                ))
              }
         </View>

Hope you find this helpful and here's a link to a working example just add your api key to make it work.