feat: use classnames() to improve BooleanRow component

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "babel-eslint": "^10.1.0",
+    "classnames": "^2.2.6",
     "i18next": "^19.4.2",
     "i18next-browser-languagedetector": "^4.0.2",
     "i18next-http-backend": "^1.0.3",

src/BooleanRow.js

@@ -1,22 +1,20 @@
 import React from "react";
+import classNames from "classnames";
 
 function BooleanRow({ selected, value }) {
-    let mark;
-    if (selected !== "rowSelected") {
-        if (value) {
-            mark = <i className="fas fa-check trueBoolean"></i>;
-        } else {
-            mark = <i className="fas fa-times falseBoolean"></i>;
-        }
-    } else {
-        if (value) {
-            mark = <i className="fas fa-check"></i>;
-        } else {
-            mark = <i className="fas fa-times"></i>;
-        }
-    }
-
-    return <span>{mark}</span>;
+    const rowSelected = selected === "rowSelected";
+    return (
+        <span>
+            <i
+                className={classNames("fas", {
+                    "fa-check": value,
+                    "fa-times": !value,
+                    trueBoolean: !rowSelected && value,
+                    falseBoolean: !rowSelected && !value,
+                })}
+            ></i>
+        </span>
+    );
 }
 
 export default BooleanRow;