undefined is not a function (near '...movies.map...')

Question

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>
        
    </>
  )
}

Does this answer your question? [The useState set method is not reflecting a change immediately](https://stackoverflow.com/questions/54069253/the-usestate-set-method-is-not-reflecting-a-change-immediately) — Harun Yilmaz, Sep 26 '22 at 15:59
My bet would be movies is being set as undefined at `res => setMovies(res)` — BenMcLean981, Sep 26 '22 at 16:02
I'll write an answer with a working example, hope it works for you. — Louay Sleman, Sep 26 '22 at 16:24

score 1 · Accepted Answer · answered Sep 26 '22 at 16:35

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.

What error do you get on your device? – Louay Sleman Sep 27 '22 at 07:45 — Louay Sleman, Sep 27 '22 at 07:45
it was an emulator problem ! it can't connect with the API – greta calamari Sep 27 '22 at 09:21 — greta calamari, Sep 27 '22 at 09:21
Ok then, happy to help :D – Louay Sleman Sep 27 '22 at 10:26 — Louay Sleman, Sep 27 '22 at 10:26

undefined is not a function (near '...movies.map...')

1 Answers1