How to collapse a div with reactjs?

Question

I am using reactjs and bootstrap v 3.0 but I can't find any collapse class in there so I defined this in my scss. The problem is that the togglebutton does not work or the toggleevent is not triggered on the div:

 toggle(e) {
        console.log('testing e',e)
        if (e.target.class === 'collapse') {
            e.target.className = 'collapse.in'
        } else {
            e.target.className = 'collapse'
        }
    }

This is my button:

<button className="btn btn-block" onClick={() => {
               this.toggle.bind('demo')
               }}>
     Open/close
</button>

How can I change the className from collapse to collapse.in and viceversa? Here is a code sample:Codepen

Answer 1

Your SCSS and your HTML is fine, the problem is in how you used React.

The open/closed state of your component should be represented with a property in this.state, and the toggle() function should simply toggle that property. The render() function, finally, should be responsible of setting the right CSS class on the <div> it renders.

Here's your Codepen updated with my suggestions.

What I did:

• I defined an initial state in the component constructor: as you can see, I set the open property to false initially;

• I rewrote the toggle() method, using this.setState() to toggle the value of the open property;

• I modified the render() function generating the class name of the <div> depending on the state. If the component state is open, the class name will be "collapse in", else it will be only "collapse".

Answer 2

There is also a library called as "react-bootstrap" which allows the integration of react with bootstrap. They have a very simple example for making the collapsible div, i am sharing the code for this which i have changed according to what i wanted.

You can use this component anywhere inside your code. This will just return a button with collapsible div.

import React, {Component} from 'react'
import {Button, Collapse} from 'react-bootstrap'

class Test extends Component{
    state={ 
        open:false
       }

    render(){
      return(
        <div className= "container">
           <Button className="btn" onClick={!this.state.open}>
               Collapse Div
           </Button>

           <Collapse in={this.state.open}>
               <div>
                  <p>Content when the button is clicked</p>
               </div>
           </Collapse>
        </div>
        );
       }
}

export default Test