TypeError: Cannot read property 'map' of undefined on tsx file

Question

ActivityListItemAttendees

interface IProps {
    attendees: IAttendee[]
}

export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => {
    return (
        <List horizontal>
            {attendees.map(attendee => (    
                <List.Item key={attendee.username}>
                    <h1>{attendee.displayName}</h1>
                </List.Item>
            ))}
        </List>
    );
}

ActivityListItem

const ActivityListItem: React.FC<{activity: IActivity}> = ({activity}) => {

    return (
        <Segment.Group>
            <Segment>
                <Item.Group>
                    <Item>
                        <Item.Image size='tiny' circular src='/items/user.png' />
                        <Item.Content>
                            <Item.Header as='a'>{activity.title}</Item.Header>
                            <Item.Meta>{format(activity.date, 'eeee do MMMM')}</Item.Meta>
                            <Item.Description>
                                Hosted By Bob
                            </Item.Description>
                        </Item.Content>
                    </Item>
                </Item.Group>
                </Segment>
                <Segment>
                    <Icon name='clock' /> {format(activity.date, 'h:mm a')}
                    <Icon name='marker' /> {activity.venue}, {activity.city}
                </Segment>
                <Segment secondary>
                    <ActivityListItemAttendees attendees = {activity.attendees} />
                </Segment>
                <Segment clearing>
                    <span>{activity.description}</span>
                    <Button
                        as={Link} to={`/activities/${activity.id}`}
                        floated='right'
                        content='View'
                        color='black' />
                </Segment>
        </Segment.Group>
    )
}

export default ActivityListItem

Display Error Like these on Browser

I can't understand why Attendees can't read on browser? I added Interface on activity file. then I use it other's file as i'm done other's components Please anyone help me out.

Their is Activity file how i declare. This file use in Create Activity, And Now On View Attendees

export interface IActivity {
    id: string;
    title: string;
    description: string;
    category: string;
    date: Date;
    city: string;
    venue: string;
    attendees: IAttendee[]
}

export interface IAttendee {
    username: string;
    displayName: string;
    image: string;
    isHost: boolean;
}

also, before render, try to `console.log` it to see what it actually holds as data — Apostolos, Jul 11 '20 at 15:48
@Apostolos thanks about Console.log. It seems Undefined. What should I do? — Ismael, Jul 11 '20 at 16:20
@Apostolos Can you check my Edited Post, I feel done already as you told. — Ismael, Jul 11 '20 at 16:34
then you need to check at `ActivityListItem` before render again via `console.log(activity)`. If this doesnt return the desired output, then you need to investigate further — Apostolos, Jul 11 '20 at 16:36
@Apostolos I appreciate your help. Can you give me suggested website where i can get those answer to mapping [link](https://ibb.co/fkrdgmj) those data on browser. Attendees available as proxy object. — Ismael, Jul 11 '20 at 16:59

score 0 · Accepted Answer · answered Jul 11 '20 at 15:52

First thing to check at same errors (not necessary though if you are 100% sure about the data):

export const ActivityListItemAttendees: React.FC<IProps> = ({attendees}) => {

console.log('What does actually attendees have?', attendees);

There are a lot of occasions where properties are at first undefined and after the second render they get their values. In such cases, you need to check if they exist, and then use map in order to prevent these errors.

return (
    <List horizontal>
        {attendees && attendees.map(attendee => (

You can also use a loader component/loader text if this is not loaded yet.

ok so then you need to go one level up and check `{activity.attendees}` — Apostolos, Jul 11 '20 at 16:20

TypeError: Cannot read property 'map' of undefined on tsx file

1 Answers1