i have data returned from the backend which i wanted display in react component with below approach it is only printing the values , how do i print both keys and values in the DOM.
index.js
{Object.entries(data).map(([key, value]) => (
<Card>
<CardContent>
<Typography variant="body2" color="text.secondary">
<p>{data[key]}</p>
<p>{data[value]}</p>
</Typography>
</CardContent>
</Card>
))}
data sample
{ 'User': ': Admin',
'Location': ': New York, NY',
'Company Name': ': Millenium'
}
Just use key instead of data[key] and value instead of data[value]. Also, be sure to provide a unique key on each mapped item in your list.
{Object.entries(data).map(([key, value]) => (
<Card key={key}>
<CardContent>
<Typography variant="body2" color="text.secondary">
<p>{key}</p>
<p>{value}</p>
</Typography>
</CardContent>
</Card>
))}