typeError: Cannot read property 'map' of undefined (nextjs)

Question

I tried very hard to find a solution to this problem, but I didn't find anything, could anyone help?

I just want to fetch this data.

typeError: Cannot read property 'map' of undefined -> Error

import styles from '../styles/galery.module.css'
import Image from 'next/image'
import Link from 'next/link'
import photo from '../public/01.png'

export const getStaticProps = async () => {

    const response = await fetch('https://api.github.com/orgs/rocketseat');
    const data = await response.json();

    return {
        props: { mods: data }
    }
}

const ProjectLines = ({ mods }) => {
    return (
        <div className={styles.categoryWrapper}>
            <h4 className={styles.subTitle}>Escritório</h4>
            <div className={styles.lineWrapper}>
                <a className={styles.leftArrow}>&#10094;</a>
                <div className={styles.line}>
                    {mods.map(mod => (
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mod.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                    ))}
                </div>
                <a className={styles.rightArrow}>&#10095;</a>
            </div>
        </div>
    );
}
export default ProjectLines;

JS Disciple · Accepted Answer · 2021-10-07 02:44:36Z

4

Yow all this comments all they do is confusing. The solution is very simple right before you map them mods check if they exists how ?

{mods && mods.map(.....

That's one way or the other is to add a default value

({ mods = []}) =>

But do the first one, is better

answered Oct 7, 2021 at 2:44

JS Disciple

3761 silver badge8 bronze badges

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

2 Comments

Gustavo Leterio Over a year ago

It did work, but the card unfortunately disappeared

JS Disciple Over a year ago

Card ? Which card ? It did not disappeared because it never was rendered. You is never using getStaticProps or how a s it connected to yow component

Gustavo Leterio · Accepted Answer · 2021-10-15 21:47:51Z

2

I was trying to use getStaticProps in a component archive, it need to be used in a page... Thanks everyone.

NextJS Documentation

answered Oct 15, 2021 at 21:47

Gustavo Leterio

911 gold badge1 silver badge5 bronze badges

1 Comment

Mo0rteza Over a year ago

I have the same problem, how did you solved it?

Pitis · Accepted Answer · 2021-10-07 02:30:32Z

1

You are fetching the data and passing it properly, but unfortunately, it is not an array, it's an object. The .map function is used on arrays to go through every element, almost like an forEach but here they are returned.

What you'll need to do is create a component for Organizations which will have the props from the object fetched, then the array of organizations will need to be traversed, if you want that.

answered Oct 7, 2021 at 2:30

Pitis

1936 bronze badges

Comments

Bhrugu Tundeliya · Accepted Answer · 2021-10-07 02:29:53Z

0

the url you are using here

(https://api.github.com/orgs/rocketseat)

to fetch data giving object in return and map functions are for array.

if you want to use the value remove the map and use the object itself.

<div className={styles.line}>
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mods.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                </div>

just change this part and you are good to go.

answered Oct 7, 2021 at 2:29

Bhrugu Tundeliya

16212 bronze badges

1 Comment

Gustavo Leterio Over a year ago

This alteration doesn't work, beacause login don't exist "typeError: Cannot read property 'map' of undefined"

illia chill · Accepted Answer · 2021-10-07 08:02:34Z

You need to add verification for each value of const ProjectLines

You have now:

<div className={styles.line}>
                    {mods.map(mod => (
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mod.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                    ))}
                </div>

You need to implement (for each variable you are using in return):

{mods ? 
<div className={styles.line}>
                    {mods.map(mod => (
                        <div className={styles.imageBox}>
                            <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                            <div className={styles.linkContent}>
                                <span className={styles.name}>{mod.login}</span>
                                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                            </div>
                        </div>
                    ))}
</div>
: ''}

Why so? because of usage getStaticProps. It's async function, check properly docs.

Also for the .map function. Somebody tells that .map can be implemented with objects, that is true. !BUT! you have to console.log(typeof(mods)), and I am 90% sure you have it as array object. In any case, you have undefined value in mods, it means it's null, and not triggering "isObject" error.

Prince Hernandez · Accepted Answer · 2021-10-07 23:22:20Z

0

well, the error is simple basically the response that you are getting is a json object, a plain json object.

with this said, basically you can not map over a object or well, you can but not using map.

the response of the url is

{
    login: "Rocketseat",
    id: 28929274,
    node_id: "MDEyOk9yZ2FuaXphdGlvbjI4OTI5Mjc0",
    url: "https://api.github.com/orgs/Rocketseat",
    repos_url: "https://api.github.com/orgs/Rocketseat/repos",
    events_url: "https://api.github.com/orgs/Rocketseat/events",
    hooks_url: "https://api.github.com/orgs/Rocketseat/hooks",
    issues_url: "https://api.github.com/orgs/Rocketseat/issues",
    members_url: "https://api.github.com/orgs/Rocketseat/members{/member}",
    public_members_url: "https://api.github.com/orgs/Rocketseat/public_members{/member}",
    avatar_url: "https://avatars.githubusercontent.com/u/28929274?v=4",
    description: "Plataforma de educação em tecnologia 🚀",
    name: "Rocketseat",
    company: null,
    blog: "https://rocketseat.com.br",
    location: null,
    email: "[email protected]",
    twitter_username: "rocketseat",
    is_verified: true,
    has_organization_projects: true,
    has_repository_projects: true,
    public_repos: 23,
    public_gists: 0,
    followers: 0,
    following: 0,
    html_url: "https://github.com/Rocketseat",
    created_at: "2017-05-24T16:16:47Z",
    updated_at: "2021-10-04T18:42:26Z",
    type: "Organization"
}

so if you want to display only the login as I think you want you need to do this:

const ProjectLines = ({ mods }) => {
    return (
        <div className={styles.categoryWrapper}>
            <h4 className={styles.subTitle}>Escritório</h4>
            <div className={styles.lineWrapper}>
                <a className={styles.leftArrow}>&#10094;</a>
                <div className={styles.line}>
                    <div className={styles.imageBox}>
                        <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
                        <div className={styles.linkContent}>
                            <span className={styles.name}>{mod.login}</span>
                            <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
                        </div>
                    </div>
                </div>
                <a className={styles.rightArrow}>&#10095;</a>
            </div>
        </div>
    );
}

but if you want to loop over each key you should do this:

{Object.values(mods || {}).map(mod => (
    <div className={styles.imageBox}>
        <Image src={photo} width={400} height={200} layout="responsive" lazy="true" placeholder="blur" />
            <div className={styles.linkContent}>
                <span className={styles.name}>{mod}</span>
                <Link href=""><a className={styles.link}>Veja Mais!</a></Link>
            </div>
    </div>
))}

hope it helps and you understand the issue with your code.

edited Oct 7, 2021 at 23:22

answered Oct 7, 2021 at 2:26

Prince Hernandez

3,7411 gold badge13 silver badges20 bronze badges

3 Comments

Gustavo Leterio Over a year ago

the first option you gave to me say: "typeError: Cannot read property 'map' of undefined"

Gustavo Leterio Over a year ago

The second option you gave to me say: "typeError: Cannot convert undefined or null to object"

Prince Hernandez Over a year ago

@GustavoLeterio the problem is that you copy pasted everything without think or at least reading the solution and what was your problem. I edited the solution, try again and if something fails at least try to debug or look for the error, it is not so hard that you are using wrong the functions of different structures.

Collectives™ on Stack Overflow

typeError: Cannot read property 'map' of undefined (nextjs)

6 Answers 6

2 Comments

1 Comment

Comments

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

Comments

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related