在ReactJs中分组和显示值

我已经根据特定属性（在我的例子中是location.title）将数组中的对象分组

输出结果如下：

New York: (2) [{...}{...}]
Washington: (3)[{...}{...}{...}]

我的问题是如何映射此输出数组并在React应用程序中获得这样的输出

纽约的家庭： 纽约之家酒店

华盛顿的家庭： 下面是

您可以在

分组的

对象上使用来获取所有键的数组，然后在该数组上使用来分别渲染它们

<div>
  {Object.keys(grouped).map(key => (
    <div key={key}>Homes in {key}: {grouped[key].join(', ')}</div>
  ))}
</div>

{Object.keys（分组）.map（key=>(
{key}中的主节点：{grouped[key].join（'，'）}
))}

函数应用程序（）{
常数分组={
‘纽约’：[‘foo’、‘bar’]，
华盛顿：['foo'，'bar'，'baz']
};
返回(
{Object.keys（分组）.map（key=>(
{key}中的主节点：{grouped[key].join（'，'）}
))}
);
}
render（，document.getElementById（“根”））

so{grouped[key]}将拉出特定数组中的对象，我可以将此对象作为道具传递给React组件，以便将其与所有道具（如图像、内容）一起显示etc@IramAkhtar是，
Object.keys（grouped）
生成一个新数组，其中所有的键都在
grouped
中，因此
grouped[key]
将在
地图的第一次迭代中
分组为['newyork']
，依此类推。如果
grouped[key]
是一个对象，如果您愿意，可以将其作为道具传递给另一个组件。my grouped[key]生成另一个数组，其中包含这样的家庭对象。（2） [{…}{…}]（3）[{…}{…}{…}{…}]我需要沿着每个位置的一侧显示这个对象数组。
<div>
  {Object.keys(grouped).map(key => (
    <div key={key}>Homes in {key}: {grouped[key].join(', ')}</div>
  ))}
</div>