react bootstrap accordion plus minus indicators issue

Question

I am using react-bootstrap accordion to my project. I tried to add arrow-right and arrow-down icon for my accordion header. Its working well. But problem is when I click my first accordion header, second accordion icon also changed. please see the attached image

I tried to do this using below code.

      const [open, setOpen] = useState(false);
     <Card>
                      <Card.Header>
                        <Accordion.Toggle
                          as={Button}
                          variant="link"
                          eventKey="2"
                          onClick={() => setOpen(!open)}
                        >
                          <span>
                            {open ? (
                              <i className="mdi  mdi-minus"></i>
                            ) : (
                              <i className="mdi  mdi-plus"></i>
                            )}
                          </span>
                          MATCH INVOICE LINES
                        </Accordion.Toggle>
                      </Card.Header>

 <Card>
                      <Card.Header>
                        <Accordion.Toggle
                          as={Button}
                          variant="link"
                          eventKey="2"
                          onClick={() => setOpen(!open)}
                        >
                          <span>
                            {open ? (
                              <i className="mdi  mdi-minus"></i>
                            ) : (
                              <i className="mdi  mdi-plus"></i>
                            )}
                          </span>
                           LINES
                        </Accordion.Toggle>
                      </Card.Header>

Above code is only the header sections. Other accordion functionalities working well. how I prevent this icon change issue

Answer 1

The reason for this is that you are using a single state to handle both of your accordian headers. Try seperating the state logic. See

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

You have "One state to rule them all" :) Once you click on any of the header you are toggling the state logic in both the cases.

onClick={() => setOpen(!open)}