Merge pull request #52 from jackyzha0/refactor-react

Refactor to use functional components instead of class components

2 files changed, 14 insertions, 18 deletions

diff --git a/frontend/src/components/decorators/CharLimit.js b/frontend/src/components/decorators/CharLimit.js
index 623b378..5a6fdca 100644
--- a/frontend/src/components/decorators/CharLimit.js
+++ b/frontend/src/components/decorators/CharLimit.js
@@ -26,12 +26,10 @@ const Chars = styled.p`
     `};
 `;
 
-class CharLimit extends React.Component {
-    render() {
-        return (
-            <Chars {...this.props} >{this.props.maxLength - this.props.content.length}/{this.props.maxLength}</Chars>
-        );
-    }
+const CharLimit = (props) => {
+    return (
+        <Chars {...props} >{props.maxLength - props.content.length}/{props.maxLength}</Chars>
+    );
 }
 
 export default CharLimit
\ No newline at end of file
diff --git a/frontend/src/components/decorators/FloatingLabel.js b/frontend/src/components/decorators/FloatingLabel.js
index e1fc0ba..ef56b44 100644
--- a/frontend/src/components/decorators/FloatingLabel.js
+++ b/frontend/src/components/decorators/FloatingLabel.js
@@ -17,18 +17,16 @@ const StyledLabel = styled.label`
     `};
 `
 
-class FloatingLabel extends React.Component {
-    render() {
-        return (
-            <StyledLabel 
-                label={this.props.label}
-                value={this.props.value}
-                className={this.props.id}
-                htmlFor={this.props.id}>
-                    {this.props.label}
-            </StyledLabel>
-        );
-    }
+const FloatingLabel = (props) => {
+    return (
+        <StyledLabel 
+            label={props.label}
+            value={props.value}
+            className={props.id}
+            htmlFor={props.id}>
+                {props.label}
+        </StyledLabel>
+    );
 }
 
 export default FloatingLabel
\ No newline at end of file