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.
Source: stackoverflow.com
Related Query
- can't access object's properties within object in react
- Can't access nested object properties in a single object from JSON call in REACT
- How do I access nested object properties within React props
- Access Object Properties in React
- Can't access api object properties - react Hooks
- Unable to access properties of object stored in a React state
- Cannot access object properties of fetched Json data with React hooks
- Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
- how to access history object in new React Router v4
- How to access the class name of a React object in this.props.children
- How to access Object array file into react component?
- react count object properties in an array
- Render Object properties in React
- Usign react-router-dom, how can I access browserHistory object from outside a React component?
- How to access object properties of 'key' object reactJS
- React access DOM element instead of object thru refs
- Access React Object from within page JS?
- Mapping object keys in react and returning child properties
- React - Display all properties of an object
- Access a react child object key and value pair
- Can not access properties in JavaScript object array (React.js)
- How to fix 'Type Error: Cannot Read Property 'name' of undefined when trying to access properties of an object' in React
- Cannot access object properties via props in ReactJS
- React - convert object into array of objects with properties
- Dynamically access object with react components in typescript by key
- Cant use variable from React Context to access value of object
- React props: Unable to access key in object in array with index both passed with props
- React Component iterate/loop properties of Mongo object
- How to access nested object in React js 0.13.3
- How to access a specific properties from a complex JSON array object in React.js
More Query from same tag
- Material UI Color Palette get hex code of auto generated shades
- Update tileLayer url in react-leaflet
- react js render differnet component based on button click
- How to re-load page on redirect React
- React: fetch call's then function not being called
- Error I'm getting with React: If you meant to render a collection of children, use an array instead
- How to display a modal inside a parent container
- React.js: Unable to access object attribute within state object
- React Tsx with React Bootstrap - Inline CSS for Active NavItem
- Formatting date and time using Moment with React JS
- Websocket error when using a proxy_pass to CRA development server using Nginx and Docker
- material-ui typescript makeStyles() types
- Mapbox-gl in React.js app, TypeError: Cannot read property 'setFeatureState' of undefined
- Reactstrap - How do I render the spinner properly within a button?
- How to use componentdidmount in modal only when i use modal?
- How to insert a 3rd party library in ReactJS app
- Should refs be in listed as dependencies for useEffect and such?
- React app how to show only limited number of array items
- The current testing environment is not configured to support act(...) - @testing-library/react
- Doesn't useEffect run after the component is rendered?
- change value in react with different files
- KeyboardAvoidingView with ScrollView
- Video Caption keeps lapping into the Video
- Rearranging the structure of objects in an array
- State object not updating with response data in function call
- Load img tag source before css is applied in Reactjs
- Do I have to use ref when passing current DOM-element?
- React convert props Objects into array then setState
- How to perform client side data fetching in Next.js
- height : 100% not being inherited