React.js显示列表的详细信息

import React, { useState } from 'react';

const ListComponent = ({ data }) => {
  const [selectedItem, setSelectedItem] = useState(null);

  const handleItemClick = (index) => {
    setSelectedItem(index);
  };

  return (
    <div>
      <ul>
        {data.map((item, index) => (
          <li key={index} onClick={() => handleItemClick(index)}>
            {item.name}
          </li>
        ))}
      </ul>
      {selectedItem !== null && (
        <div>
          <h2>{data[selectedItem].name}</h2>
          <p>{data[selectedItem].description}</p>
          {/* 其他详细信息 */}
        </div>
      )}
    </div>
  );
};

export default ListComponent;