如何按id或索引切换项目？React.js

import React, { useState } from 'react';

const ProjectList = () => {
  const [selectedProject, setSelectedProject] = useState(null);

  const projects = [
    { id: 1, name: 'Project 1' },
    { id: 2, name: 'Project 2' },
    { id: 3, name: 'Project 3' },
  ];

  const handleProjectClick = (id) => {
    setSelectedProject(id);
  };

  return (
    <div>
      <h2>Project List</h2>
      <ul>
        {projects.map((project) => (
          <li
            key={project.id}
            onClick={() => handleProjectClick(project.id)}
            style={{ fontWeight: selectedProject === project.id ? 'bold' : 'normal' }}
          >
            {project.name}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default ProjectList;