From 05678b74d98247c957faa1ca3d0bafc5f68974d1 Mon Sep 17 00:00:00 2001
From: Emiliano Ciavatta
Date: Wed, 23 Sep 2020 23:16:58 +0200
Subject: Add BooleanField

---
 frontend/src/components/fields/StringField.js | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'frontend/src/components/fields/StringField.js')

diff --git a/frontend/src/components/fields/StringField.js b/frontend/src/components/fields/StringField.js
index aa23fe8..7781b2d 100644
--- a/frontend/src/components/fields/StringField.js
+++ b/frontend/src/components/fields/StringField.js
@@ -6,8 +6,14 @@ const classNames = require('classnames');
 
 class StringField extends Component {
 
+    constructor(props) {
+        super(props);
+
+        this.id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+    }
+
     render() {
-        const id = `field-${this.props.name || "noname"}-${randomClassName()}`;
+
         const active = this.props.active || false;
         const invalid = this.props.invalid || false;
         const small = this.props.small || false;
@@ -27,18 +33,18 @@ class StringField extends Component {
         };
 
         return (
-            <div className={classNames("field", "string-field", {"field-active" : active},
-                {"field-invalid": invalid}, {"field-small": small}, {"field-inline": inline})}>
+            <div className={classNames("string-field", {"field-active" : active}, {"field-invalid": invalid},
+                {"field-small": small}, {"field-inline": inline})}>
                 <div className="field-wrapper">
                     { name &&
                     <div className="field-name">
-                        <label id={id}>{name}:</label>
+                        <label id={this.id}>{name}:</label>
                     </div>
                     }
                     <div className="field-input">
                         <div className="field-value">
                             <input type={type} placeholder={this.props.defaultValue} aria-label={name}
-                                   aria-describedby={id} onChange={handler} value={value} />
+                                   aria-describedby={this.id} onChange={handler} value={value} />
                         </div>
                         { value !== "" &&
                         <div className="field-clear">
-- 
cgit v1.2.3-70-g09d2