CODEWITHSUNDEEP
reactjs
BillyWalsh
BillyWalsh

Reputation: 89

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

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  😢"
    />

enter image description here

Upvotes: 2

Views: 180

Answers (2)

Kathirpandian K
Kathirpandian K

Reputation: 354

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

import _ from 'lodash';

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

Upvotes: 2

Aarni Joensuu
Aarni Joensuu

Reputation: 741

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.

Upvotes: 3

Related Questions