单击特定元素时显示数组中的当前信息

import React, { useState } from 'react';

const App = () => {
  const [selectedItem, setSelectedItem] = useState(null);
  const data = [
    { id: 1, name: 'Item 1', description: 'This is item 1' },
    { id: 2, name: 'Item 2', description: 'This is item 2' },
    { id: 3, name: 'Item 3', description: 'This is item 3' }
  ];

  const handleClick = (item) => {
    setSelectedItem(item);
  };

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id} onClick={() => handleClick(item)}>
            {item.name}
          </li>
        ))}
      </ul>
      {selectedItem && (
        <div>
          <h2>{selectedItem.name}</h2>
          <p>{selectedItem.description}</p>
        </div>
      )}
    </div>
  );
};

export default App;