title: React - Expand/Collapse All
body: <p>I would like to Expand/Collapse all using a single button click.</p>
  
  <p>Created a new component CollapsiblePanel using reactstrap and using the created component in the container(index.js).</p>
  
  <p>Now I can able to expand/collapse all the containers on clicking the button.</p>
  
  <p><a href="https://codesandbox.io/s/fervent-banzai-s9pst" rel="nofollow noreferrer">https://codesandbox.io/s/fervent-banzai-s9pst</a></p>
  
  <p><strong>CollapsiblePanel.js</strong></p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import { Collapse } from "reactstrap";
  
  function CollapsiblePanel({ children, ...props }) {
      const { title, collapse } = props;
      const [isCollapse, setIsCollapse] = useState(collapse);
      const [icon, setIcon] = useState("fa fa-chevron-down");
      const toggle = () =&gt; {
          setIsCollapse(!isCollapse);
          setIcon(state =&gt; {
              return state === "fa fa-chevron-down"
                  ? "fa fa-chevron-right"
                  : "fa fa-chevron-down";
          });
      };
  
      useEffect(() =&gt; {
          toggle();
      }, [collapse]);
  
      return (
          &lt;div className="coll-panel"&gt;
              &lt;button
                  type="button"
                  className="coll-panel-btn btn-primary btn-block text-left"
                  onClick={() =&gt; toggle()}
              &gt;
                  &lt;i className={icon} /&gt; {title}
              &lt;/button&gt;
              &lt;Collapse className="border text-left p-2" isOpen={isCollapse}&gt;
                  {children}
              &lt;/Collapse&gt;
          &lt;/div&gt;
      );
  }
  
  CollapsiblePanel.defaultProps = {
      children: "Add node as a child",
      title: "Collapsible Panel",
      collapse: true
  };
  
  export default CollapsiblePanel;
  </code></pre>
  
  <p><strong>index.js</strong></p>
  
  <pre><code>import React, { useState } from "react";
  import ReactDOM from "react-dom";
  import CollapsiblePanel from "./component/CollapsiblePanel";
  
  import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
  import "./styles.css";
  
  function App() {
      const text =
          "Lorem ipsum dolor sit amet consectetur adipisicing elit.Nihil earum illo ipsa velit facilis provident qui eligendi, quia ut magnam tenetur. Accusantium nisi quos delectus in necessitatibus ad. Ducimus, id!";
      const [collapse, setCollapse] = useState(true);
      const [title, setTitle] = useState("Expand All");
      const [icon, setIcon] = useState("fa fa-chevron-right");
      const collapseAll = () =&gt; {
          setCollapse(!collapse);
          setIcon(state =&gt; {
              return state === "fa fa-chevron-right"
                  ? "fa fa-chevron-down"
                  : "fa fa-chevron-right";
          });
          setTitle(state =&gt; {
              return state === "Expand All" ? "Collapse All" : "Expand All";
          });
      };
      return (
          &lt;div className="App container my-2"&gt;
              {/* Expand/Collapse All */}
              &lt;button
                  type="button"
                  className="btn-warning mt-4 mb-3 float-left"
                  onClick={collapseAll}
              &gt;
                  &lt;i className={icon} /&gt; {title}
              &lt;/button&gt;
              &lt;CollapsiblePanel title="Title 1" collapse={collapse}&gt;
                  &lt;span&gt;{text}&lt;/span&gt;
              &lt;/CollapsiblePanel&gt;
              &lt;CollapsiblePanel title="Title 2" collapse={collapse}&gt;
                  &lt;span&gt;{text}&lt;/span&gt;
              &lt;/CollapsiblePanel&gt;
              &lt;CollapsiblePanel title="Title 3" collapse={collapse}&gt;
                  &lt;span&gt;{text}&lt;/span&gt;
              &lt;/CollapsiblePanel&gt;
              &lt;CollapsiblePanel title="Title 4" collapse={collapse}&gt;
                  &lt;span&gt;{text}&lt;/span&gt;
              &lt;/CollapsiblePanel&gt;
              &lt;CollapsiblePanel title="Title 5" collapse={collapse}&gt;
                  &lt;span&gt;{text}&lt;/span&gt;
              &lt;/CollapsiblePanel&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p><strong>Now:</strong>
  Before clicking the Expand/Collapse All button, If any of the collapsible containers (in index.js) is clicked and then on clicking the Expand/Collapse button not all the containers are expanding.</p>
  
  <p>The opened is closing and vice versa.</p>
  
  <p><strong>Expected:</strong></p>
  
  <p>Though the container is opened/closed explicitly. On clicking the Expand/Collapse I would like to expand/collapse all. Thanks in advance.</p>