Type Error "Map" is not a function while using react hooks

Question

I am new to react and I am building a component thats going to be displayed within the profile page for a specific type of user of the app that I am working on "podcaster". I am trying to display their podcasts in a responsive list but I keep getting this typeError. I have looked at different examples here on SO but I have not been able to find the problem. I am using 2 hooks to get this info [useState & useEffect] yet I am not able to fully understand why I am getting this error.

import { FC, useState, useEffect, Fragment } from 'react'
import ResponsiveList from '../ResponsiveList'

const UserProfilePodcaster: FC = () => {
const {
  user: { id, accountType },
    } = useAuth()
const [podcasts, setPodcasts] = useState<any[]>([])
const [showModal, setShowModal] = useState(false)
const [currentPodcast, setCurrentPodcast] = useState<any>({})
const [isLoading, setIsLoading] = useState(true)
const [categories, setCategories] = useState<{ name: string; code: string }[]>([])

 useEffect(() => {
;(async function () {
  const categories = await getCategories()
  const podcasts = await getPodcast(id)

  setCategories(categories)
  setPodcasts(podcasts)
  setIsLoading(false)
  })()
  }, [id])

  <ResponsiveList
      data={podcasts.map((podcast: any) =>
        podcast.name({
          ...podcast,
          edit: (
            <Button
              variant="contained"
              color="primary"
              fullWidth
              onClick={() => handleEditPodcast(podcast)}
            >
              Edit
            </Button>
          ),
        })
      )}
      keys={[
        { key: 'podcasts', label: 'Podcast Name' },
        { key: 'categories', label: 'Podcast Categories' },
        { key: 'description', label: 'Podcast Niche' },
        { key: 'Reach', label: 'Podcast Reach' },
        {
          key: 'edit',
          label: 'Edit',
        },
      ]}
      emptyMessage="It seems that you have not created a podcast yet, go out and start one  😢"
    />

Check length or use optional chaining before the map. Example: podcasts?.map developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Asif vora
– Asif vora, Commented Nov 16, 2021 at 10:57

Aarni Joensuu · Accepted Answer · 2021-11-16 11:01:59Z

3

map is a function of the Array prototype. If map is not a function, it means your podcasts is not an array. This might happen due to bugs in programming or as a result of podcasts being the result of e.g. an API call which is not there yet (is undefined) on first render as the API call has not resolved yet.

There are many ways to go about the latter case. You could e.g. write

data={podcasts?.map(...)}

and make sure the <ResponsiveList/> handles undefined data well, or you could render a loader for as long as the data is not there yet.

answered Nov 16, 2021 at 11:01

Aarni Joensuu

7611 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kathirpandian K · Accepted Answer · 2021-11-16 11:10:26Z

2

You can use lodash package. lodash will handle this type of errors

import _ from 'lodash';

.
.
.
data={_.map(podcasts, pod =>  {pod['key_name']})}

answered Nov 16, 2021 at 11:10

Kathirpandian K

3541 gold badge2 silver badges17 bronze badges

Collectives™ on Stack Overflow

Type Error "Map" is not a function while using react hooks

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related