React object, display key names - reactjs

Question

I have a demo here
It's a simple React TypeScript app where I am displaying an object
The object is like
{
"default": {
"ProductSize": {
"min": 32
},
"ProductHeight": {
"min": 15
},
"ProductWeight": 50
},
"ProductOne": {
"ProductSize": {
"min": 20,
"max": 15
},
"ProductHeight": {
"min": 50,
"max": 87
},
"ProductSpacing": 90,
"ProductWeight": 100
},
"ProductTwo": {
"ProductSize": {
"min": 43,
"max": 67
},
"ProductHeight": {
"min": 12,
"max": 78
},
"ProductSpacing": 34,
"ProductWeight": 56
}
}
I can pull out parts of the jsons like
<ul>
{Object.keys(ProductData).map(key => (
<li key={key}>{ProductData[key].ProductSize.min}</li>
))}
</ul>
but how can I get the key name for each block
So I want to list
default
ProductOne
ProductTwo
ProductThree
I have tried
<li key={key}>{ProductData[key].key}</li>
but I get an empty list item

Answer 1

Answer
You already have keys array through Object.keys(ProductData)
So it will be simple
<ul>
{Object.keys(ProductData).map(key => (
<li key={key}>{key}</li>
))}
</ul>
Theory
Object.keys(obj) returns array of obj keys, MDN docs
const obj = {
foo: 12
bar: 'bar'
}
// will return ['foo', 'bar']
const keys = Object.keys(obj);
// will return <li key="foo"}>foo</li><li key="bar">bar</li>
const items = keys.map((key) => <li key={key}>{key}</li>)
If you will need a key and a value together see Object.entries() docs
// will return [['foo', 12], ['bar', 'bar']]
const entries = Object.entries(obj);
// will return <li key="foo"}>foo: 12</li><li key="bar">bar: bar</li>
const items = entries.map(([key, value]) => <li key={key}>{key}: {value}</li>);
For [key, value] syntax see destructuring docs