如何将小于10的产品名称、颜色及其颜色数量输出为列表

Question

[！[这是Firebase的以下数据。请注意，有些产品每种产品都有1、2或3种颜色。我希望输出小于10的颜色和颜色数量][1][1]

[！[his是代码的输出。这就是我想要的样子。但在输出中，正如你所看到的，颜色与数量太接近，并且产品翻滚时输出的颜色不小于10。][2]][2]

这是我遇到问题的代码。

<ul>
{details.filter((detail) => Object.values(detail.colorMap).find(c => c < 10)).map((val) => 
{
return (<li key={val.id}><p className="pt-2">{val.prodName}{Object.entries(val.colorMap).map((c) => (<p>{c[0]}{c[1]}</p>))}</p></li>);
})}
</ul>

Answer 1

您可以添加另一个filter()来获得值小于10的颜色，如下所示：

<p className="pt-2">
{val.prodName}
{Object.entries(val.colorMap)
// Filter for colors with value < 10
.filter((c) => c[1] < 10)
.map((c) => (
<p>
{c[0]}
{c[1]}
</p>
))}
</p>