Map function returns undefined

205
February 10, 2020, at 5:30 PM

Im getting undefined on my app = TypeError: Cannot read property 'map' of undefined and my console.log(cartoons) and i dont know what the issue is. im passing props the right way or im wrong? please help :(

this is my Cardlist.js file

import React, { Fragment } from 'react';
import Card from '../components/Card';

const Cardlist = ({ cartoons }) => {
   console.log(cartoons);
    return (
        <Fragment> 
            {
                cartoons.map((user, i) => {
                    return (
                        <Card 
                            key={i}
                            id={cartoons[i].id} 
                            name={cartoons[i].name}
                            email={cartoons[i].email}
                        />
                    ); 
                })
            }
        </Fragment>
    );
};
export default Cardlist;

this is also my cartoons.js file

export const cartoons = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz'
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv'
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net'
  },
];
Answer 1

map function requires data of type array.cartoons variable seems to be empty or not an array data type assign empty array if its value is null or undefined.

Answer 2

you can try this with container pattern for best practice:

cartoonDb.js

// cartoonDb.js
export const cartoons = [
  {
    id: 1,
    name: 'Leanne Graham',
    username: 'Bret',
    email: 'Sincere@april.biz'
  },
  {
    id: 2,
    name: 'Ervin Howell',
    username: 'Antonette',
    email: 'Shanna@melissa.tv'
  },
  {
    id: 3,
    name: 'Clementine Bauch',
    username: 'Samantha',
    email: 'Nathan@yesenia.net'
  },
];

CardListContainer.js

// CardListContainer.js
import React from './CardList';
import CardList from './CardList';
import {cartoons} from './cartoonDb';
export default class CardListContainer extends React.Component {
  render() {
    return <CardList cartoons={cartoons} />
  }
}

CardList.js

// CardList.js
import React from './CardList';
export default const CardList = ({ cartoons }) => (
 <div className="cardList">
    {cartoons.map(cartoon => (
       <Card 
         key={cartoon.id}
         name={cartoon.name}
         email={cartoon.email}
       />
    ))}
  </div>
);
Answer 3

In your code, cartoons[0] is undefined.

When using map function, array index starts from 0.

You can use cartoons[i+1] or user.id.

Hope this helps!

cartoons.map((user, i) => {
                    return (
                        <Card 
                            key={i+1}
                            id={user.id}  
                            name={user.name} 
                            email={user.email} 
                        />
                    ); 
                })
Rent Charter Buses Company
READ ALSO
MEVN Stack update document field in mongodb cloud

MEVN Stack update document field in mongodb cloud

I have trouble updating data in mongodb through a parameterI have successfully done it in JavaScript but can't get it working with Express in Node

142
Cypress form submit to same url

Cypress form submit to same url

I am testing a form submit with CypressMy Form action is the same has the current page URL

179
Regex string replace, while keeping the original newlines [closed]

Regex string replace, while keeping the original newlines [closed]

Want to improve this question? Add details and clarify the problem by editing this post

130
Filtering an api response in reactjs

Filtering an api response in reactjs

I am pretty new to reactI am using react-redux to call API's with Axios

226