MyCrypto/common/containers/Tabs/ENS/components/GeneralInfoPanel/GeneralInfoNode.tsx

import React from 'react';
import { HeaderProps, ListProps, NodeProps, NodeState } from './types';

const InfoHeader = ({ children, onClickHandler }: HeaderProps) =>
  <h6 onClick={onClickHandler}>
    <span>+</span> {children}
  </h6>;

const InfoList = ({ children, isOpen }: ListProps) =>
  isOpen
    ? <ul>
        {children}
      </ul>
    : null;

export default class GeneralInfoNode extends React.Component<
  NodeProps,
  NodeState
> {
  public state = {
    isOpen: false
  };

  public toggleVisibility = () =>
    this.setState(prevState => ({ isOpen: !prevState.isOpen }));

  public render() {
    const {
      toggleVisibility,
      props: { innerList, headerContent },
      state: { isOpen }
    } = this;

    return (
      <section>
        <InfoHeader onClickHandler={toggleVisibility}>
          {headerContent}
        </InfoHeader>
        <InfoList isOpen={isOpen}>
          {innerList}
        </InfoList>
      </section>
    );
  }
}