Uncaught (in promise) TypeError: res.map is not a function

Question

I'm trying to fetch a list of departments from an url in a react native application

import React,{ useState,useEffect} from 'react';
import { StyleSheet, LogBox,View,Text } from 'react-native';




export default function App() {
var [department,setDepartment]=useState([])
const token = /* my token here */

  const getDepartments=()=>{  
    const url = /*my api's url here*/

      return fetch(url, {
          method: 'GET',
          headers: { "Authorization": "Bearer" + token ,
          'Accept': 'application/json',
          'Content-Type':'application/json'
      }
      })
          .then(response => response.json())
           .then(data=>console.log(data)) // returns the correct data
          .catch(error => console.error(error))
  }

   const getdepartment = async () => {
            await getDepartments().then((res) => //here lays the problem
              {res.map((p, key) => {
                department.push({
                  name: p.name,
                  id: p.id,
                });
              });
            });
          };

          useEffect(() => {

            getdepartment();

          }, []);

  return (
  <View>
  <Text>
             {department[0]}
                            </Text>

              </View>
  )
}

here res in the getdepartment() function is undefined despite the getDepartments() function returning correct data from the url

Answer 1

You are not returning a value from getDepartments, just a simple console.log.

You can convert the function in async/await:

const getDepartments = async () => {  
    const url = /*my api's url here*/
    try {
      const response = await fetch(url, {
          method: 'GET',
          headers: { "Authorization": "Bearer" + token ,
          'Accept': 'application/json',
          'Content-Type':'application/json'
      }
      })
      return await response.json();
      } catch(e){
        // error
      }
  }

or return a value from your function:

const getDepartments=()=>{  
    const url = /*my api's url here*/

      return fetch(url, {
          method: 'GET',
          headers: { "Authorization": "Bearer" + token ,
          'Accept': 'application/json',
          'Content-Type':'application/json'
      }
      })
          .then(response => response.json())
          .catch(error => console.error(error))
  }

Answer 2

If you are returning the result of the fetch then just return the result obtained from it, the issue is along with fetch, the response is also handled and the complete thing post to that is being returned which is not the result so you just need to skip this line .then(data=>console.log(data))

const getDepartments=()=>{  
const url = /*my api's url here*/

  return fetch(url, {
      method: 'GET',
      headers: { "Authorization": "Bearer" + token ,
      'Accept': 'application/json',
      'Content-Type':'application/json'
  }
  }).then(response =>  response.json()).catch(error => 
     console.error(error))
   
  }

// Here after fetching the result you can map the data

  const getdepartment = async () => {
        await getDepartments().then((res) => 
          {res.map((p, key) => {
            department.push({
              name: p.name,
              id: p.id,
            });
          });
        });
      };