Converting rendering components to functional components

src/rendering/SVG/index.js

@@ -21,16 +21,7 @@ const metadata = `<rdf:rdf>
 </rdf:rdf>`;
 /* eslint-enable max-len */
 
-class SVG extends React.PureComponent {
+const SVG = ({ innerWidth, innerHeight, children }) => {
-  static propTypes = {
-    children: PropTypes.node,
-    innerWidth: PropTypes.number,
-    innerHeight: PropTypes.number
-  }
-
-  render() {
-    const { innerWidth, innerHeight, children } = this.props;
-
   const width = Math.round(innerWidth + 2 * padding);
   const height = Math.round(innerHeight + 2 * padding);
 
@@ -48,7 +39,12 @@ class SVG extends React.PureComponent {
       { children }
     </g>
   </svg>;
-  }
+};
-}
+
+SVG.propTypes = {
+  children: PropTypes.node,
+  innerWidth: PropTypes.number,
+  innerHeight: PropTypes.number
+};
 
 export default SVG;

src/rendering/Text/index.js

@@ -3,42 +3,28 @@ import PropTypes from 'prop-types';
 
 import * as style from './style';
 
-class Text extends React.PureComponent {
+const Text = ({ transform, quoted, children }) => {
-  static propTypes = {
-    quoted: PropTypes.bool,
-    transform: PropTypes.string,
-    children: PropTypes.oneOfType([
-      PropTypes.arrayOf(PropTypes.node),
-      PropTypes.node
-    ]).isRequired
-  }
-
-  renderContent() {
-    const { children, quoted } = this.props;
-
-    if (!quoted) {
-      return children;
-    }
-
-    return <>
-      <tspan style={ style.quote }>&ldquo;</tspan>
-      <tspan>{ children }</tspan>
-      <tspan style={ style.quote }>&rdquo;</tspan>
-    </>;
-  }
-
-  render() {
-    const { transform } = this.props;
-
   const textProps = {
     style: style.text,
     transform
   };
 
   return <text { ...textProps }>
-      { this.renderContent() }
+    { quoted ? <>
+      <tspan style={ style.quote }>&ldquo;</tspan>
+      <tspan>{ children }</tspan>
+      <tspan style={ style.quote }>&rdquo;</tspan>
+    </> : children }
   </text>;
-  }
+};
-}
+
+Text.propTypes = {
+  quoted: PropTypes.bool,
+  transform: PropTypes.string,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node
+  ]).isRequired
+};
 
 export default Text;