关于创建删除功能的React设计问题

import React, { useState } from 'react';

function CreateDeleteFeature() {
  const [projects, setProjects] = useState([]);
  const [projectName, setProjectName] = useState('');

  const handleInputChange = (e) => {
    setProjectName(e.target.value);
  };

  const handleCreateProject = () => {
    const newProject = {
      id: Date.now(), // 生成唯一的ID
      name: projectName
    };

    setProjects([...projects, newProject]);
    setProjectName(''); // 清空输入框
  };

  const handleDeleteProject = (projectId) => {
    const updatedProjects = projects.filter((project) => project.id !== projectId);
    setProjects(updatedProjects);
  };

  return (
    <div>
      <input type="text" value={projectName} onChange={handleInputChange} />
      <button onClick={handleCreateProject}>创建项目</button>

      <ul>
        {projects.map((project) => (
          <li key={project.id}>
            {project.name}
            <button onClick={() => handleDeleteProject(project.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default CreateDeleteFeature;