如果对象属性值符合特定条件，如何在react中呈现数据

Question

我在react中有一个数组，它具有属性Name、Age和值-

[{Name:'Martha', Age: 15},{Name:'Candice', Age: 19},{Name:'Ruby', Age: 7}]

我需要基于年龄显示名称，即如果年龄>18，他们应该分组在"成年人"标题下，否则是"孩子"。我该怎么做？

这就是预期-

ADULT
Candice
KIDS
Martha
Ruby

Answer 1

这效率很低，但会起作用。基本上，过滤成人和儿童的数组，然后呈现列表。

const TestComponent = () => {
const userList = [{Name:'Martha', Age: 15},{Name:'Candice', Age: 19},{Name:'Ruby', Age: 7}];
return (
<div>
<span>Adult</span>
<ul>
{userList
.filter((user) => user.Age >= 18)
.map((user) => (
<li>{user.Name}</li>
))}
</ul>
<span>Kids</span>
<ul>
{userList
.filter((user) => user.Age < 18)
.map((user) => (
<li>{user.Name}</li>
))}
</ul>
</div>
);
};