react-bootstrap accordion issue in the arrow icons

user_14753393 0
Viewed 3250

I am using react-bootstrap accordion to my project. i am trying to add up and down arrow button indicators to my accordion header. please check sample code for the question

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

    <Accordion.Toggle as={Button} variant="link" eventKey="2" className="according-text" onClick={() => setOpen(!open)}>
                      <i className="mdi mdi-view-headline"> </i>      LINES  {open ? <i className="mdi mdi-menu-down"></i> : <i className="mdi mdi-menu-up"></i>}
                    </Accordion.Toggle>
<Accordion.Toggle as={Button} variant="link" eventKey="2" className="according-text" onClick={() => setOpen(!open)}>
                      <i className="mdi mdi-view-headline"> </i>      MATCH INVICE LINES{open ? <i className="mdi mdi-menu-down"></i> : <i className="mdi mdi-menu-up"></i>}
                    </Accordion.Toggle>

when i click first accordion header, second accordion header icon is changed. check below image initial state enter image description here

after clicked first accordion header enter image description here

how i prevent this. can you help me to fix this? thanks

react-bootstrap reactjs
1 Answers

The state should be the array index of Accordion, you can see the code below, hope it helps

 const [idx, setIdx] = useState([]);

  {[...yourArray].map((accordion, index) => (
    <Accordion.Toggle
      as={Button}
      variant="link"
      eventKey="2"
      className="according-text"
      onClick={() => {
        if (idx.includes(index)) setIdx(idx.filter(i => i !== index));
        else setIdx([...idx, index]);
      }}
    >
      <i className="mdi mdi-view-headline"> </i> LINES{" "}
      {idx.includes(index) ? (
        <i className="mdi mdi-menu-down"></i>
      ) : (
        <i className="mdi mdi-menu-up"></i>
      )}
    </Accordion.Toggle>
  ))}
user_116030040
Related