如何在ReactJs中使Accordion标头和项目可编辑

如何解决如何在ReactJs中使Accordion标头和项目可编辑

我想在我的ReactJs中添加手风琴，以便标题和列表是可编辑的。 Aslo这些标题和列表将是动态的，因为我将从API中获取它们。我查看了互联网，但没有找到任何解决方案。请帮助我完成此任务。预先感谢。

<Accordion defaultActiveKey="0">
  <Card>
    <Card.Header> Category Name1
      <Accordion.Toggle as={Button} variant="link" eventKey="0">
        +
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey="0">
      <Card.Body>Item1</Card.Body>
      <Card.Body>Item2</Card.Body>
    </Accordion.Collapse>
  </Card>
  <Card>
    <Card.Header> Category Name2
      <Accordion.Toggle as={Button} variant="link" eventKey="1">
        +
      </Accordion.Toggle>
    </Card.Header>
    <Accordion.Collapse eventKey="1">
      <Card.Body>Item1</Card.Body>
      <Card.Body>Item2</Card.Body>
      <Card.Body>Item3</Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>