React-bootstrap-table2: Collapse all rows on the button click

[SandeepKapalawai]

Question
I wanted to implement only the collapse all functionality for all the rows on clicking the button that is being displayed out side of the table. When we click on the button, all the rows that are being expanded should collapse

I am working on the react hooks, so i have the functional component, i am using the custom expandRow like below

`
const [expanded, setexpanded] = useState([0, 1]);
const handleBtnClick = () =>{

if(!expanded.includes(2)){
  setexpanded(expanded => [...expanded,2]);
}
else{

  setexpanded(expanded => expanded.filter(x => x!==2));
}

};

const handleOnExpand = (row, isExpand, rowIndex, e) => {
if (isExpand) {
setexpanded(expanded => [...expanded,row.id]);

} else {
  setexpanded(expanded => expanded.filter(x => x !== row.id));
}

};

const expandRow = {
renderer: (row, index) => {

  return(

    <div className="table-section">
     <Table1/>
     <Table2/>
    </div>
  );
},
showExpandColumn: true,
expandByColumnOnly: true,
className: 'expanding-foo',
parentClassName: 'parent-expand-row',
expanded : expanded,
onExpand : handleOnExpand,

expandColumnRenderer: ({ expanded, rowKey }) => {
  if (expanded) {

    return (
      <FontAwesomeIcon icon={faAngleUp} className="arrowIcons" />
    );
  } else {
    return (
      <FontAwesomeIcon icon={faAngleDown} className="arrowIcons" />
    );
  }
}

};

variant="secondary"
type="submit"
className="float-right top-row-margin"

        onClick={() => {handleBtnClick(); }}>
          Collapse All
      </Button>
    </Row>

`
i went through the demos for row expand management, tried to the implement in the same way for using my button, but doesn't seems working out, no errors in my console . But i wanted to implement only the collapse all rows functionality is this the same way to get this or am i missing anything ? Thank you
@AllenFang

[SandeepKapalawai]

@Chun-MingChen

[jonrandahl]

@sonusandeep wouldn't your button be as simple as clearing all from the expanded?

const handleBtnClick = () => setexpanded(expanded => []);

Apologies if I've misunderstood!

[SandeepKapalawai]

Thank you so much this works for me