fix(questionBuilder): remove function component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indec/form-builder",
-  "version": "2.4.5",
+  "version": "2.4.6",
   "description": "Form builder",
   "main": "index.js",
   "private": false,

src/components/QuestionBuilder/Question/Question.js

@@ -0,0 +1,62 @@
+import {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import Typography from '@mui/material/Typography';
+import {useFormikContext} from 'formik';
+
+import sectionPropTypes from '@/utils/propTypes/section';
+import buildQuestions from '@/utils/buildQuestions';
+import getQuestionProps from '@/utils/getQuestionProps';
+import getQuestionComponent from '@/utils/getQuestionComponent';
+
+import Wrapper from '../Wrapper';
+
+function Question({
+  section,
+  sectionIndex,
+  questionIndex,
+  disabled,
+  warnings,
+  values
+}) {
+  const question = section.questions[questionIndex];
+  if (!question) {
+    return null;
+  }
+  const {setFieldValue} = useFormikContext();
+  const {
+    props, questionName, jump, questionType
+  } = getQuestionProps({sectionIndex, section, question, values, disabled, warnings});
+  let shouldClean = false;
+  if (!!jump?.action && !shouldClean) {
+    shouldClean = true;
+  }
+
+  useEffect(() => {
+    if (shouldClean) {
+      const defaultAnswerValue = buildQuestions(section)[section.name][0][question.name].answer;
+      setFieldValue(questionName, defaultAnswerValue);
+      shouldClean = false;
+    }
+  }, [shouldClean, questionName]);
+
+  const Component = getQuestionComponent(questionType);
+  return Component
+    ? <Wrapper component={Component} {...props} />
+    : <Typography>Invalid component.</Typography>;
+}
+
+Question.propTypes = {
+  section: sectionPropTypes.isRequired,
+  disabled: PropTypes.bool,
+  values: PropTypes.shape({}).isRequired,
+  sectionIndex: PropTypes.number.isRequired,
+  questionIndex: PropTypes.number.isRequired,
+  warnings: PropTypes.shape({})
+};
+
+Question.defaultProps = {
+  disabled: false,
+  warnings: {}
+};
+
+export default Question;

src/components/QuestionBuilder/Question/index.js

@@ -0,0 +1,3 @@
+import Question from './Question';
+
+export default Question;

src/components/QuestionBuilder/QuestionBuilder.js

@@ -1,57 +1,23 @@
-import {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
-import {useFormikContext} from 'formik';
 
 import sectionPropTypes from '@/utils/propTypes/section';
-import buildQuestions from '@/utils/buildQuestions';
-import getQuestionProps from '@/utils/getQuestionProps';
-import getQuestionComponent from '@/utils/getQuestionComponent';
 
-import Wrapper from './Wrapper';
-
-const getComponent = (
-  section,
-  sectionIndex,
-  questionIndex,
-  disabled,
-  warnings,
-  values
-) => {
-  const question = section.questions[questionIndex];
-  if (!question) {
-    return null;
-  }
-  const {setFieldValue} = useFormikContext();
-  const {
-    props, questionName, jump, questionType
-  } = getQuestionProps({sectionIndex, section, question, values, disabled, warnings});
-  let shouldClean = false;
-  if (!!jump?.action && !shouldClean) {
-    shouldClean = true;
-  }
-
-  useEffect(() => {
-    if (shouldClean) {
-      const defaultAnswerValue = buildQuestions(section)[section.name][0][question.name].answer;
-      setFieldValue(questionName, defaultAnswerValue);
-      shouldClean = false;
-    }
-  }, [shouldClean, questionName]);
-
-  const Component = getQuestionComponent(questionType);
-  return Component
-    ? <Wrapper component={Component} {...props} />
-    : <Typography>Invalid component.</Typography>;
-};
+import Question from './Question';
 
 function QuestionBuilder({values, section, index, disabled, warnings}) {
   return (
     <Grid data-testid="question-builder">
       {Object.values(values).map((value, valueIndex) => value.id && (
         <Grid item key={value.id} mb={2}>
-          {getComponent(section, index, valueIndex - 1, disabled, warnings, values)}
+          <Question
+            section={section}
+            sectionIndex={index}
+            questionIndex={valueIndex - 1}
+            disabled={disabled}
+            warnings={warnings}
+            values={values}
+          />
         </Grid>
       ))}
     </Grid>