30-seconds-of-code/snippets/Collapse.md

Collapse

Renders a component with collapsible content.

Use the value of the collapsed prop to determine the initial state of the content (collapsed/expanded). Set the state of the component to the value of the collapsed prop (cast to a boolean value) and bind the toggleCollapse method to the component's context. Use an object, style, to hold the styles for individual components and their states. Create a method, toggleCollapse, which uses Component.prototype.setState to change the component's state from collapsed to expanded and vice versa. In the render() method, use a <div> to wrap both the <button> that alters the component's state and the content of the component, passed down via props.children. Determine the appearance of the content, based on state.collapsed and apply the appropriate CSS rules from the style object. Finally, update the value of the aria-expanded attribute based on state.collapsed to make the component accessible.

class Collapse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: !!props.collapsed
    };
    this.style = {
      collapsed: {
        display: 'none'
      },
      expanded: {
        display: 'block'
      },
      buttonStyle: {
        display: 'block',
        width: '100%'
      }
    };
    this.toggleCollapse = this.toggleCollapse.bind(this);
  }
  
  toggleCollapse() {
    this.setState(state => ({ collapsed: !state.collapsed }));
  }
  
  render() {
    return (
      <div>
        <button style={this.style.buttonStyle} onClick={this.toggleCollapse}>
          {this.state.collapsed ? 'Show' : 'Hide'} content
        </button>
        <div 
          style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} 
          aria-expanded = {this.state.collapsed}
        >
          {this.props.children}
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Collapse>
    <h1>This is a collapse</h1>
    <p>Hello world!</p>
  </Collapse>,
  document.getElementById('root')
);