score:0

to access single properties you can use the dot operator like users[0].email, to access the properties dynamically you can use .map() like that:

import react from "react";
import filterlisticon from '@mui/icons-material/filterlist';
import { button, card, cardactions, cardcontent, cardmedia, typography } from "@mui/material";
import users from "./users";

const contacts = () => {
    return (
      <div classname="parentdiv">
          {
              console.log(users[0].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">
            {users.map((user)=>{
              return (
                <card sx={{ maxwidth: 345 }}>
                <cardmedia
                  component="img"
                  height="140"
                  src={user.avatar}
                  alt="robo img"
                />
                <cardcontent>
                  <typography gutterbottom variant="h5" component="div">
                    {user.first_name}
                  </typography>
                  <typography variant="body2" color="text.secondary">
                  {user.last_name}
                  </typography>
                </cardcontent>
                <cardactions>
                  
                  <button size="small">show more</button>
                </cardactions>
              </card>
              )
            })}
                </div>
            </div>
  )
}
export default contacts;

here is a sandbox in case you need it.


Related Query

More Query from same tag