I'm working on a React app where I have an array of objects in a file called users.js, and another file named contacts.jsx. In the contacts.jsx file, I am trying to display a Material UI card and access the properties of the object within that card.
Despite using the dot (.) operator, I keep getting 'undefined' in the console.log. Can someone please point out what mistake I might be making and suggest how I can properly access properties like avatar, email, first_name, etc.?
users.js
const users = [{
id: 1,
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="086f6d677a6f6d266a647d7c60487a6d797a6d7b266166">[email protected]</a>",
first_name: "George",
last_name: "Bluth",
avatar: "https://reqres.in/img/faces/1-image.jpg"
},
{
id: 2,
email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e18b808f8495cf968480978493a1938490938492cf888f">[email protected]</a>",
first_name: "Janet",
last_name: "Weaver",
avatar: "https://reqres.in/img/faces/2-image.jpg"
}]
export default users;
contacts.jsx
import React from "react";
import FilterListIcon from '@mui/icons-material/FilterList';
import { Button, Card, CardActions, CardContent, CardMedia, Typography } from "@mui/material";
import users from "../constants/users";
const Contacts = () => {
return (
<div className="parentDiv">
{
console.log(users.email,'email') // Result: undefined 'email'
}
<div className="header">
<h1>Robo Space</h1>
<input className="searchFilter" type='text' placeholder="Search here" />
<span className="filterIcon"><FilterListIcon /></span>
</div>
<div className="body">
<Card sx={{ maxWidth: 345 }}>
<CardMedia
component="img"
height="140"
img={users.avatar}
alt="robo img"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="div">
{users.first_name}
</Typography>
<Typography variant="body2" color="text.secondary">
{users.last_name}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Show More</Button>
</CardActions>
</Card>
</div>
</div>
)
}
export default Contacts;