Refactor func args to use getters instead of ternary

Cleaning up the render function

ui/src/flux/components/FuncArgs.tsx

@@ -21,47 +21,11 @@ interface Props {
 @ErrorHandling
 export default class FuncArgs extends PureComponent<Props> {
   public render() {
-    const {
-      func,
-      bodyID,
-      service,
-      onChangeArg,
-      onDeleteFunc,
-      declarationID,
-      onGenerateScript,
-      declarationsFromBody,
-    } = this.props
-    const {name: funcName, id: funcID} = func
+    const {onDeleteFunc} = this.props
+
     return (
       <div className="func-node--tooltip">
-        <div className="func-args">
-          {funcName === funcNames.JOIN ? (
-            <Join
-              func={func}
-              bodyID={bodyID}
-              declarationID={declarationID}
-              onChangeArg={onChangeArg}
-              declarationsFromBody={declarationsFromBody}
-              onGenerateScript={onGenerateScript}
-            />
-          ) : (
-            func.args.map(({key, value, type}) => (
-              <FuncArg
-                key={key}
-                type={type}
-                argKey={key}
-                value={value}
-                bodyID={bodyID}
-                funcID={funcID}
-                funcName={funcName}
-                service={service}
-                onChangeArg={onChangeArg}
-                declarationID={declarationID}
-                onGenerateScript={onGenerateScript}
-              />
-            ))
-          )}
-        </div>
+        <div className="func-args">{this.renderJoinOrArgs}</div>
         <div className="func-arg--buttons">
           <div
             className="btn btn-sm btn-danger btn-square"
@@ -75,6 +39,67 @@ export default class FuncArgs extends PureComponent<Props> {
     )
   }
 
+  get renderJoinOrArgs(): JSX.Element | JSX.Element[] {
+    const {func} = this.props
+    const {name: funcName} = func
+
+    if (funcName === funcNames.JOIN) {
+      return this.renderJoin
+    }
+
+    return this.renderArguments
+  }
+
+  get renderArguments(): JSX.Element | JSX.Element[] {
+    const {
+      func,
+      bodyID,
+      service,
+      onChangeArg,
+      declarationID,
+      onGenerateScript,
+    } = this.props
+    const {name: funcName, id: funcID} = func
+
+    return func.args.map(({key, value, type}) => (
+      <FuncArg
+        key={key}
+        type={type}
+        argKey={key}
+        value={value}
+        bodyID={bodyID}
+        funcID={funcID}
+        funcName={funcName}
+        service={service}
+        onChangeArg={onChangeArg}
+        declarationID={declarationID}
+        onGenerateScript={onGenerateScript}
+      />
+    ))
+  }
+
+  get renderJoin(): JSX.Element {
+    const {
+      func,
+      bodyID,
+      onChangeArg,
+      declarationID,
+      onGenerateScript,
+      declarationsFromBody,
+    } = this.props
+
+    return (
+      <Join
+        func={func}
+        bodyID={bodyID}
+        declarationID={declarationID}
+        onChangeArg={onChangeArg}
+        declarationsFromBody={declarationsFromBody}
+        onGenerateScript={onGenerateScript}
+      />
+    )
+  }
+
   get build(): ReactElement<HTMLDivElement> {
     const {func, onGenerateScript} = this.props
     if (func.name === funcNames.FILTER) {