面试题：React中如何使用列表渲染结合条件展示数据

Question

假设你有一个数组，数组中的每个对象包含 'name' 和 'isActive' 两个属性。请使用React的列表渲染结合条件展示，仅显示 'isActive' 为true的对象的 'name'，并将其渲染为无序列表项。请写出完整的函数式组件代码。

Answer 1

import React from 'react';

const MyComponent = ({ data }) => {
    const activeNames = data.filter(item => item.isActive).map(item => item.name);
    return (
        <ul>
            {activeNames.map((name, index) => (
                <li key={index}>{name}</li>
            ))}
        </ul>
    );
};

export default MyComponent;