如何显示/隐藏使用react动态呈现的数据数组中的一个元素

import React, { useState } from 'react';

function App() {
  const [data, setData] = useState([
    { id: 1, name: 'Item 1', visible: true },
    { id: 2, name: 'Item 2', visible: true },
    { id: 3, name: 'Item 3', visible: true }
  ]);

  const toggleVisibility = (id) => {
    setData(data.map(item => 
      item.id === id ? { ...item, visible: !item.visible } : item
    ));
  };

  return (
    <div>
      {data.map(item => (
        item.visible && <div key={item.id}>{item.name}</div>
      ))}
      <button onClick={() => toggleVisibility(2)}>Toggle Item 2</button>
    </div>
  );
}

export default App;

import React, { useState, memo } from 'react';

const ListItem = memo(({ item }) => {
  return <div>{item.name}</div>;
});

function App() {
  // ... 省略其他代码

  return (
    <div>
      {data.map(item => (
        item.visible && <ListItem key={item.id} item={item} />
      ))}
      <button onClick={() => toggleVisibility(2)}>Toggle Item 2</button>
    </div>
  );
}

export default App;