diff --git a/package.json b/package.json
index 1bfb5ed..2f944ba 100644
--- a/package.json
+++ b/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,
diff --git a/src/components/QuestionBuilder/Question/Question.js b/src/components/QuestionBuilder/Question/Question.js
new file mode 100644
index 0000000..bb850d9
--- /dev/null
+++ b/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
+ ?
+ : Invalid component.;
+}
+
+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;
diff --git a/src/components/QuestionBuilder/Question/index.js b/src/components/QuestionBuilder/Question/index.js
new file mode 100644
index 0000000..88bd56f
--- /dev/null
+++ b/src/components/QuestionBuilder/Question/index.js
@@ -0,0 +1,3 @@
+import Question from './Question';
+
+export default Question;
diff --git a/src/components/QuestionBuilder/QuestionBuilder.js b/src/components/QuestionBuilder/QuestionBuilder.js
index 3575923..bd0a578 100644
--- a/src/components/QuestionBuilder/QuestionBuilder.js
+++ b/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
- ?
- : Invalid component.;
-};
+import Question from './Question';
function QuestionBuilder({values, section, index, disabled, warnings}) {
return (
{Object.values(values).map((value, valueIndex) => value.id && (
- {getComponent(section, index, valueIndex - 1, disabled, warnings, values)}
+
))}