eslint - remove react/jsx-no-useless-fragment ignoring & fix

.eslintrc.js

@@ -94,7 +94,6 @@ module.exports = {
         'react/destructuring-assignment': 'off',
         'react/forbid-prop-types': 'off',
         'react/function-component-definition': 'off',
-        'react/jsx-no-useless-fragment': 'off',
         'react/jsx-props-no-spreading': 'off',
         'react/no-danger': 'off',
         'react/no-deprecated': 'off',

client/src/components/CommentApp/components/Comment/index.tsx

@@ -82,12 +82,12 @@ export interface CommentProps {
 }
 
 export default class CommentComponent extends React.Component<CommentProps> {
-  renderReplies({ hideNewReply = false } = {}): React.ReactFragment {
+  renderReplies({ hideNewReply = false } = {}): React.ReactFragment | null {
     const { comment, isFocused, store, user } = this.props;
 
     if (!comment.remoteId) {
       // Hide replies UI if the comment itself isn't saved yet
-      return <></>;
+      return null;
     }
 
     const onChangeNewReply = (value: string) => {
@@ -154,7 +154,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
     // Hide new reply if a reply is being edited as well
     const newReplyHidden = hideNewReply || replyBeingEdited;
 
-    let replyForm = <></>;
+    let replyForm;
     if (!newReplyHidden && (isFocused || comment.newReply)) {
       replyForm = (
         <form onSubmit={sendReply}>
@@ -186,7 +186,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
       // If there is no form, or replies, don't add any elements to the dom
       // This is in case there is a warning after the comment, some special styling
       // is added if that element is that last child so we can't have any hidden elements here.
-      return <></>;
+      return null;
     }
 
     return (

client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx

@@ -540,7 +540,7 @@ function getCommentDecorator(commentApp: CommentApp) {
     }, [commentId, annotationNode, blockKey]);
 
     if (!enabled) {
-      return <>{children}</>;
+      return children;
     }
 
     const onClick = () => {