title: How to toggle plus to minus and vice-versa in bootstrap Accordion
body: <p>I am woking on <code>Accordion</code> using <code>react-bootstrap</code> I have successfully created the Accordion, Now I want to provide toggle to the each header like plus minus when it is open show - sing when it is closed show plus sign, But I am not able to handle the event </p>
  
  <p><strong>What I have Done</strong></p>
  
  <pre><code>import React from "react";
  import "./styles.css";
  import { Accordion, Card } from "react-bootstrap";
  
  const App = () =&gt; {
    const data = [
      { name: "mike", age: 22 },
      { name: "clive", age: 25 },
      { name: "morgan", age: 82 }
    ];
    return (
      &lt;div className="App"&gt;
        &lt;Accordion defaultActiveKey="0"&gt;
          {data.map((item, index) =&gt; (
            &lt;Card&gt;
              &lt;Accordion.Toggle as={Card.Header} eventKey={index}&gt;
                {item.name}
              &lt;/Accordion.Toggle&gt;
              &lt;Accordion.Collapse eventKey={index}&gt;
                &lt;Card.Body&gt;{item.age}&lt;/Card.Body&gt;
              &lt;/Accordion.Collapse&gt;
            &lt;/Card&gt;
          ))}
        &lt;/Accordion&gt;
      &lt;/div&gt;
    );
  };
  export default App;
  </code></pre>
  
  <p><a href="https://react-bootstrap.netlify.app/components/accordion/#accordion" rel="nofollow noreferrer">I am using this</a></p>
  
  <p><a href="https://codesandbox.io/s/crimson-shape-6bb16?file=/src/App.js" rel="nofollow noreferrer">Working Code sandbox</a></p>