content: import React from 'react';
  import PropTypes from 'prop-types';
  import Interactive from 'react-interactive';
  import { Link } from 'react-router-dom';
  import { Li } from '../styles/style';
  import s from '../styles/exampleTwoDeepComponent.style';
  
  const propTypes = {
    location: PropTypes.object.isRequired,
  };
  
  export default function ExampleTwoDeepComponent({ location }) {
    const queryPresent = location.search !== '';
    const hashPresent = location.hash !== '';
  
    function queryStringTitle() {
      if (queryPresent) return 'The query string field-value pairs are:';
      return 'No query string in the url';
    }
  
    function hashFragmentTitle() {
      if (hashPresent) return 'The hash fragment is:';
      return 'No hash fragment in the url';
    }
  
    function linkToShowQueryAndOrHash() {
      if (queryPresent && hashPresent) return null;
  
      const queryString = (queryPresent ? location.search : '?field1=foo&field2=bar');
      const hashFragment = (hashPresent ? location.hash : '#boom!');
  
      let linkText = '';
      if (queryPresent && !hashPresent) linkText = 'Show with hash fragment';
      if (!queryPresent && hashPresent) linkText = 'Show with query string';
      if (!queryPresent && !hashPresent) linkText = 'Show with query string and hash fragment';
  
      return (
        <div style={s.lineContainer}>
          <Interactive
            as={Link}
            to={`/example/two-deep${queryString}${hashFragment}`}
            {...s.link}
          >{linkText}</Interactive>
        </div>
      );
    }
  
    function parseQueryString() {
      if (!queryPresent) return [];
      return location.search
        .replace('?', '')
        .split('&')
        .map(fvPair => fvPair.split('='))
        .map(pair => [pair[0], pair.slice(1).join('=')]);
    }
  
    return (
      <div>
        <div style={s.lineContainer}>
          <div>{queryStringTitle()}</div>
          <ul>
            {
              parseQueryString().map((pair, index) => (
                <Li key={`${pair[0]}${pair[1]}${index}`}>{`${pair[0]}: ${pair[1]}`}</Li>
              ))
            }
          </ul>
        </div>
        <div style={s.lineContainer}>
          <div>{hashFragmentTitle()}</div>
          <ul>
            {hashPresent && <Li>{location.hash.slice(1)}</Li>}
          </ul>
        </div>
        {linkToShowQueryAndOrHash()}
      </div>
    );
  }
  
  ExampleTwoDeepComponent.propTypes = propTypes;
  