How to create collapse expand list in react

Question

I try to create a collapse and expand side menu in React (v 16.5) with the following criteria -

On page load first item (Circulars) will be in expanded

Answer 1

You should use a state variable to show your collapsiable item active / in-active.

I modified your code a bit to fit it into your requirements.

class App extends Component {
  constructor() {
    super();
    this.state = {
        activeCollapse: 'circulars'
    };
  }

  handleExpandCollaps = (name) => {
    if (this.state.activeCollapse === name) {
        this.setState({ activeCollapse: '' })
    } else {
        this.setState({ activeCollapse: name })
    }
  }

  moreInfoClick = (e) => {
    e.stopPropagation();
    console.log("clicked");
  }
  render() {
    return (
      

        

          


            
 this.handleExpandCollaps("circulars")} data-id="circulars" >
              

                Circulars
                
                  View more info
                
              
              
BODY CONTENT HERE
            

            
 this.handleExpandCollaps("specifications")} data-id="specifications">
              

                Specifications
                
                  View more info
                
              
              
BODY CONTENT HERE
            


            
 this.handleExpandCollaps("wo")} data-id="wo">
              

                Work Orders
                
                  View more info
                
              
              
BODY CONTENT HERE
            

          
        
      
    );
  }
}

Note: I have used CSS for font-awesome icons. Hope you have added font-awesome

Demo