在react with typescript中编辑list的特殊元素

import React, { useState } from 'react';

interface ListItem {
  id: number;
  name: string;
  age: number;
}

const EditableList: React.FC = () => {
  const [list, setList] = useState<ListItem[]>([]);
  const [editingItem, setEditingItem] = useState<ListItem | null>(null);

  const handleEdit = (item: ListItem) => {
    setEditingItem(item);
  };

  const handleSave = () => {
    if (editingItem) {
      const updatedList = list.map((item) =>
        item.id === editingItem.id ? editingItem : item
      );
      setList(updatedList);
      setEditingItem(null);
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    setEditingItem((prevItem) => ({
      ...prevItem,
      [name]: value,
    }));
  };

  const renderList = () => {
    return list.map((item) => (
      <div key={item.id}>
        <span>{item.name}</span>
        <span>{item.age}</span>
        <button onClick={() => handleEdit(item)}>Edit</button>
      </div>
    ));
  };

  const renderEditingForm = () => {
    if (!editingItem) return null;

    return (
      <div>
        <input
          type="text"
          name="name"
          value={editingItem.name}
          onChange={handleInputChange}
        />
        <input
          type="number"
          name="age"
          value={editingItem.age}
          onChange={handleInputChange}
        />
        <button onClick={handleSave}>Save</button>
      </div>
    );
  };

  return (
    <div>
      {renderList()}
      {renderEditingForm()}
    </div>
  );
};

export default EditableList;