List

List.tsx

import { useState } from 'react';
import './List.css';

type Item = {
  id: number;
  title: string;
  description: string;
};

type ListProps = {
  items: Item[];
  onItemClick?: (item: Item) => void;
};

const List = ({ items, onItemClick }: ListProps) => {
  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);

  const handleItemClick = (item: Item) => {
    setSelectedItemId(item.id);
    if (onItemClick) onItemClick(item);
  };

  return (
    <div className="list">
      {items.map((item) => (
        <div
          key={item.id}
          className={`list-item ${selectedItemId === item.id ? 'selected' : ''}`}
          onClick={() => handleItemClick(item)}
        >
          <h3>{item.title}</h3>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default List;

Usage

import List from './List';

const items = [
  {
    id: 1,
    title: 'Item 1',
    description: 'This is the first item',
  },
  {
    id: 2,
    title: 'Item 2',
    description: 'This is the second item',
  },
  {
    id: 3,
    title: 'Item 3',
    description: 'This is the third item',
  },
];

const handleItemClick = (item: Item) => {
  console.log(`Clicked item ${item.id}: ${item.title}`);
};

const App = () => {
  return (
    <div>
      <h1>List Example</h1>
      <List items={items} onItemClick={handleItemClick} />
    </div>
  );
};
export default App;

List.css

.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  padding: 8px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.list-item.selected {
  background-color: #e0e0e0;
}