How to render a component with collapsible content in ReactJS

To render a component with collapsible content in ReactJS, use the React.useState() hook to create the isCollapsed state variable with an initial value of props.collapsed. Use an object, style, to hold the styles for individual components and their states. Use a <div> to wrap both the <button> that alters the component's isCollapsed state and the content of the component, passed down via props.children. Determine the appearance of the content, based on, isCollapsed and apply the appropriate CSS rules from the style object. Finally, update the value of the aria-expanded attribute based on isCollapsed to make the component accessible.

Code Sample:

function Collapse(props) {
  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);

  const style = {
    collapsed: {
      display: "none"
    },
    expanded: {
      display: "block"
    },
    buttonStyle: {
      display: "block",
      width: "100%"
    }
  };

  return (
    <div>
      <button
        style={style.buttonStyle}
        onClick={() => setIsCollapsed(!isCollapsed)}
      >
        {isCollapsed ? "Show" : "Hide"} content
      </button>
      <div
        className="collapse-content"
        style={isCollapsed ? style.collapsed : style.expanded}
        aria-expanded={isCollapsed}
      >
        {props.children}
      </div>
    </div>
  );
}

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

Happy Coding!