Values not being mapped to object when getting element - arrays

Question

What I want:
I want to get values for a JSON object declared like:
Tickets.json
[
{
"ticket_id": 13,
"user_id": 1,
"country_code": "+267",
"mobile_number": 74111111,
"email": "tdjlknds#sdmnnsd.com",
"policy_number": 7411235,
"category": "Unable to pay for cover",
"description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui",
"created_date": "2021/01/16 08:45:01",
"status": "IN PPROGRESS"
},
{
"ticket_id": 2,
"user_id": 2,
"country_code": "+267",
"mobile_number": 72654867,
"email": "tdjlknds#sdmnnsd.com",
"policy_number": 1243456,
"category": "Other",
"description": "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui",
"created_date": "2021/01/16 08:45:01",
"status": "WAITING CUSTOMER FEEDBACK"
}
]
And map it to an interface object in another .tsx file like this:
TicketCard.tsx
interface IViewTickets {
type: string;
userObj: {
ticket_id: number;
user_id: number;
country_code: string;
mobile_number: number;
email: string;
policy_number: number;
category: string;
description: string;
created_date: string;
status: string;
};
}
const TicketCard: React.FC<IViewTickets> = (props) => {
// some code
}
To do this I am using the below:
Dashboard.tsx
return (
<React.Fragment>
<div className="mainDashboardDiv">
<div id={`${styleId}`}>
{
Tickets.map(function (item, index) {
return ([
<DisplayList key={index} type="Open" userObj={item} />
]);
})
}
</div>
</div>
</React.Fragment>
)
I want to be able to use userObj to populate a the dashboard with all the json array items but I keep getting the error:
TypeError: Cannot read property 'policy_number' of undefined
I've tried a lot of things:
Using index or idx to pass on the index of an array
Rendering the json to an object array and using a loop to pass on values
adding a key value of the ID from the json
I keep getting the same error and console.log() shows that I'm not passing anything to the other file
Other ticketCard.tsx return define like:
return (
<Fragment>
<Card tokens={cardTokens} className="ticketCard animated fadeInLeft" compact={false}>
<Card.Item>
<Persona text={policy_string} secondaryText={tickets.created_date} />
</Card.Item>
<Card.Section>
<Text variant="small" styles={siteTextStyles}>
{tickets.category}
</Text>
<Text styles={descriptionTextStyles}>{tickets.ticket_id}</Text>
<Text variant="small" styles={helpfulTextStyles}>
{tickets.description}
</Text>
</Card.Section>
<Card.Section horizontal styles={footerCardSectionStyles} tokens={footerCardSectionTokens}>
<PrimaryButton className="cardButton" text={props.type} onClick={openTicketChat}/>
</Card.Section>
</Card>
</Fragment>
)

Answer 1

I just realized that I did it properly and the actual problem was that I called TicketCard.tsx instead of Dashboard.tsx.
When I fixed that issue, they showed up just fine.