Heading.js

// This doesn't work
// I'd like to figure out why it doesn't.
// I get the following error:
// Heading(...): A valid React element (or null) must be returned. 
// You may have returned undefined, an array or some other invalid object.
import styled from 'styled-components';

export const getFontSize = ({ level }) => `${0.5 + (1 / level)}rem`;

const Heading = ({ level }) => {
  const element = `h${level}`;
  console.log('element', element);

  return styled(element)`
    font-family: ${(props) => props.theme.fonts.primary};
    font-weight: 500;
    font-size: ${getFontSize};
  `;
};

Heading.defaultProps = {
  level: 1
};

export default Heading;

Heading.working.js

// This works, but I'd rather avoid the extra boilerplate if I can

import React from 'react';
import styled, { css } from 'styled-components';

export const getFontSize = ({ level }) => `${0.5 + (1 / level)}rem`;

const styles = css`
  font-family: ${(props) => props.theme.fonts.primary};
  font-weight: 500;
  font-size: ${getFontSize};
`;

const Heading = styled(
  ({ level, children, ...props }) =>
    React.createElement(`h${level}`, props, children)
)`${styles}`;

Heading.defaultProps = {
  level: 1
};

export default Heading;