小编3st*_*cks的帖子

我有一张卡片清单。单击每张卡片后，我希望它们能够展开并提供更多信息。我从服务器获取卡片并绘制它们。为了扩展单张卡而不是多张卡，我创建了一个状态 editIndex，它检查卡的 id，以便它可以正常工作并专门扩展该卡。我不知道如何同时扩展一张卡和另一张卡。因为现在如果我点击卡片，另一张展开的卡片就会折叠起来。

  const [studentList, setStudentList] = useState();
  const [input, setInput] = useState(" ");
  const [editIndex, setEditIndex] = useState(null);
  const [suggestions, setSuggestions] = useState(null);


 const handleExpand = (id) => {
 setEditIndex((e) => (e === id ? null : id))};
 
return (
<div
  className="flex
  flex-col 
  w-4/5
  h-[800px]
  overflow-scroll
  scrollbar-hide
  border 
  bg-white 
  rounded-xl
  "
>
  <div>
    {studentList?.map(
      ({
        city,
        company,
        email,
        firstName,
        grades,
        id,
        lastName,
        pic,
        skill,
      }) => (
        <div
          key={uuidv4()}
          onClick={(e) => handleExpand(id)}
          className="flex  border-b-2 py-2 px-7 xl:px-12 cursor-pointer
            mb-2 …