render()

in www/src/templates/component.js [46:101]

• 54 lines of code
• 4 McCabe index (conditional complexity)

  render() {
    const { data, location } = this.props;
    const { metadata } = data;
    const { componentPages } = data.site.siteMetadata;
    const { codeSandboxId } = componentPages.find(
      (page) => page.displayName === metadata.displayName
    );
    return (
      <Layout data={data} location={location}>
        <div>
          <Container>
            <h1 id={metadata.displayName}>{metadata.displayName}</h1>
            <div
              dangerouslySetInnerHTML={{ __html: extractMarkdown(metadata) }}
            />

            {codeSandboxId != null && (
              <Example
                codeSandbox={{
                  title: `${metadata.displayName} Component`,
                  id: codeSandboxId,
                }}
              />
            )}

            <h2 id={`${metadata.displayName}-props`}>
              <a href={`#${metadata.displayName}-props`}>Props</a>
              {metadata.composes && (
                <>
                  {' '}
                  <small style={{ fontStyle: 'italic', fontSize: '70%' }}>
                    Accepts all props from{' '}
                    {metadata.composes
                      .map((p) => (
                        <code key={p}>{`<${p.replace('./', '')}>`}</code>
                      ))
                      .reduce((acc, el, i) => {
                        acc.push(el);
                        if (i < metadata.composes.length - 1) {
                          acc.push(', ');
                        }
                        return acc;
                      }, [])}{' '}
                    unless otherwise noted.
                  </small>
                </>
              )}
            </h2>
            {metadata.props.map((p) =>
              this.renderProp(p, metadata.displayName)
            )}
          </Container>
        </div>
      </Layout>
    );
  }