React-bootstrap accordion сменить плюс на минус при открытии каждого блока (и наоборот)

Question

Мне надо сделать чтобы при открытии каждого блока плюс перед ним изменился на минус и наоборот. А у меня получилось что при клике на одного блока все плюсы меняються на минус и наоборот.Компонент будет работать динамически внутри функции map так что для каждого блока создание несколько статических useState не вариант.

Вот мой код.

import React, { useState } from "react";
import { Accordion, Card } from "react-bootstrap";

export default function App() {
  const [open, setOpen] = useState(false);
  return (
    <Accordion defaultActiveKey="0">
      <Card>
        <Accordion.Toggle
          as={Card.Header}
          onClick={() => setOpen(!open)}
          eventKey="0"
        >
          Click me!
          {open ? "+" : "-"}
        </Accordion.Toggle>

        <Accordion.Collapse eventKey="0">
          <Card.Body>Hello! I'm the body</Card.Body>
        </Accordion.Collapse>
      </Card>
      <Card>
        <Accordion.Toggle
          as={Card.Header}
          eventKey="1"
          onClick={() => setOpen(!open)}
        >
          Click me!
          {open ? "+" : "-"}
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="1">
          <Card.Body>Hello! I'm another body</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
}

Посмотрел еще этот вариант хотел сделать как там но не получилось перевести эту функцию на хуковый вариант

toggleCollapse = collapseID => () =>
this.setState(prevState => ({
  collapseID: prevState.collapseID !== collapseID ? collapseID : ""
}));

Answer 1

Решил след. образом.

Добавил такой useState

const [open, setOpen] = useState([]);

Потом эту функцию

const checkIf = (findedEl) => {
    setOpen(oldArr => !oldArr.find(e => e === findedEl) ? [...oldArr, findedEl] : oldArr.filter(e => e !== findedEl ? e : null));
}

Что это функция делает? Если в массиве нету елемента он его туда добавляет иначе удаляет.Все просто пока что. Добавляем функцию checkIf в Accordion.Toggle

<Accordion.Toggle
      as={Button}
      variant="link"
      eventKey="0"
      onClick={() => checkIf("уникальное имя")}>

И в коде проверяем внутри Accordion.Toggle в jsx

{
    open.find(el => el === "уникальное имя") ? <ChevronUp /> : <ChevronDown />
}

Я решил свою проблему но буду ждать ответов пока действие награды не закончится и если будут правильные ответы обязательно приму их.

БЛОГ НА HUSL

React-bootstrap accordion сменить плюс на минус при открытии каждого блока (и наоборот)

Ответы (1 шт):