change JSX for JS

Author: Valyukhov

src/components/BibleBookList/BibleBookList.js

@@ -96,11 +96,7 @@ function BibleBookList({
   ) : (
     ''
   );
-
-  return (
-    <>
-      {checkboxRender}
-      {testamentList.map((el, index) => {
+const bookListRender = testamentList.map((el, index) => {
         return (
           <BookList
             bookClasses={bookClasses}
@@ -117,7 +113,12 @@ function BibleBookList({
             title={el.title}
           />
         );
-      })}
+      })
+
+  return (
+    <>
+      {checkboxRender}
+      {bookListRender}
     </>
   );
 }

src/components/Book/Book.js

@@ -3,6 +3,7 @@ import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
 
 function Book({ isset, bookId, classes, className, isSelected, text, onClick }) {
+
   return (
     <Button
       className={className}

src/components/BookList/BookList.js

@@ -12,11 +12,8 @@ function BookList({
   onClickBook,
   showInactive,
 }) {
-  return (
-    <>
-      <div className={bookListClasses?.title}>{title}</div>
-      <Box className={bookListClasses?.bookList}>
-        {bookList.map(
+
+  bookListRender = bookList.map(
           (el, index) =>
             (showInactive || el.isset) && (
               <Book
@@ -30,7 +27,13 @@ function BookList({
                 text={el.text}
               />
             )
-        )}
+        )
+
+  return (
+    <>
+      <div className={bookListClasses?.title}>{title}</div>
+      <Box className={bookListClasses?.bookList}>
+        {bookListRender}
       </Box>
     </>
   );

src/components/Chapter/Chapter.js

@@ -3,6 +3,7 @@ import Button from '@material-ui/core/Button';
 import PropTypes from 'prop-types';
 
 function Chapter({ isSelected, classes, className, chapterId, chapterPrefix, onClick }) {
+
   return (
     <Button
       className={className}

src/components/ChapterList/ChapterList.js

@@ -11,9 +11,7 @@ function ChapterList({
   selectedChapter,
   onClickChapter,
 }) {
-  return (
-    <Box className={chapterListClasses?.chapterList}>
-      {chapterList.map((el, index) => (
+  chapterListRender = chapterList.map((el, index) => (
         <Chapter
           chapterId={el}
           chapterPrefix={chapterPrefix}
@@ -23,7 +21,11 @@ function ChapterList({
           key={index}
           onClick={onClickChapter}
         />
-      ))}
+      ))
+
+  return (
+    <Box className={chapterListClasses?.chapterList}>
+      {chapterListRender}
     </Box>
   );
 }