Search code examples
reactjsreactstrap

change the default behavior of reactstrap UncontrolledCollapse

Is it possible to change the behavior of reactstrap UncontrolledCollapse component to be open by default without using a state handler?

Solution

  • Before reactstrap v7.0.0 it is not possible to have an uncontrolled collapse which is open by default.

    For versions after reactstrap v7.0.0:

    UncontrolledCollapse now accepts a prop defaultOpen. Source

    You can pass this flag as true to keep it open by default. 

    const App = () => (      
   <div className="App">
     <button id="toggler">
        Toggle
     </button>
     <UncontrolledCollapse toggler="#toggler" defaultOpen={true}>
        <Card>
            <CardBody>
              <h1>Hello CodeSandbox</h1>
              <h2>Start editing to see some magic happen!</h2>
            </CardBody>
         </Card>
      </UncontrolledCollapse>
    </div>
 );

    Here is the link to the codesandbox: https://codesandbox.io/s/keen-benz-koc2f