在array.map()中呈现数据的react js问题

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const listItems = data.map(item => <li key={item.id}>{item.name}</li>);

return <ul>{listItems}</ul>;

const ListItem = ({ id, name }) => {
  return <li>{name}</li>;
};

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const listItems = data.map(item => <ListItem key={item.id} {...item} />);

return <ul>{listItems}</ul>;

const data = [
  { id: 1, name: 'John', isAdmin: true },
  { id: 2, name: 'Jane', isAdmin: false },
  { id: 3, name: 'Bob', isAdmin: true }
];

const listItems = data.map(item => {
  if (item.isAdmin) {
    return <li key={item.id}>{item.name} (Admin)</li>;
  } else {
    return null; // 不渲染非管理员用户
  }
});

return <ul>{listItems}</ul>;

const data = [
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
];

const handleClick = (id) => {
  console.log(`Clicked item with ID ${id}`);
};

const listItems = data.map(item => (
  <li key={item.id} onClick={() => handleClick(item.id)}>
    {item.name}
  </li>
));

return <ul>{listItems}</ul>;