Feature/checkbox form

[crisanlucid]

No description provided.

[booya2nd]

General question did you intentionally avoided a redux pattern (action->reducer->store) ?

[booya2nd]

errrm ... should not for..in in general imho

[crisanlucid]

sure, I am trying to keep it simple, which means I have only Parent Business Login and trying to propagate the methods to the Functional Component

[crisanlucid]

updateFormPage is object not array

[booya2nd]

I think Object.entries would be your better choice here

[crisanlucid]

I can replace for ... in with Object.entries()

[booya2nd]

this looks structurally intimidating at first glance ...

react-quiz/src/components/Form/Form.js

Lines 42 to 51 in c3ca710

	if ('text' !== updateFormPage[key]['elementConfig']['type']) {
	updateFormPage[key]['value'] = updateFormPage[
	key
	].elementConfig.options.reduce((acc, { label, value }) => {
	if (value === updateFormPage[key].elementConfig.defaultOption) {
	acc = label;
	}
	return acc;
	}, '');
	}

can you try to write the code that the reader is able to understand what it does without parsing each line ?

[booya2nd]

also this is one more "wtf" block - more readybility in terms of getting WHAT / WHAT-FOR it does - this way I can read it line by line in terms of HOW

react-quiz/src/components/Form/Form.js

Lines 70 to 84 in c3ca710

	if ('radio' === updatedFormElement.elementConfig.type) {
	updatedFormElement.elementConfig.defaultOption =
	event.currentTarget.value;
	updatedFormElement.value = updatedFormElement.elementConfig.options.reduce(
	(acc, { label, value }) => {
	if (value === event.currentTarget.value) {
	acc = label;
	}
	return acc;
	},
	''
	);
	} else {
	updatedFormElement.value = event.target.value;
	}

[crisanlucid]

I can extract and put into a arrow function to be more readable

[booya2nd]

yes adopting clean-code principals and moving logic into named functional scopes will help a lot here :)

[booya2nd]

I would try to get this information from the store, as you already have to update the state per answered question, it would be easy to have the value stored there

[crisanlucid]

I found it, from performance point of view to have a function to calculate all the answered questions and I called once.

Form.js is a Functional Component and is does not have proper State

[booya2nd]

In general "performance-reasons" or rather performance optimizations should be tackled when measurable / testable issues are discovered in an early version - as long as there is no issue I would always follow the best approach for maintainability and or readability.

[booya2nd]

I'd say avoid magic numbers - read it from a config / named-constant

[booya2nd]

general pattern of special/specific code in generalized component does not feel right:

react-quiz/src/components/UI/Input/Input.js

Lines 9 to 39 in c3ca710

	if ('radio' === props.elementConfig.type) {
	inputElement = props.elementConfig.options.map((option, index) => {
	return (
	<div
	className={inputClasses.join(' ')}
	key={`${props.elementConfig.name}-${index}`}
	>
	<label>
	<input
	type={props.elementConfig.type}
	name={props.elementConfig.name}
	value={option.value}
	checked={props.selectedOption === option.value}
	onChange={props.changed}
	className="form-check-radio"
	/>
	{option.label}
	</label>
	</div>
	);
	});
	} else {
	inputElement = (
	<input
	className={inputClasses.join(' ')}
	{...props.elementConfig}
	value={props.value}
	onChange={props.changed}
	/>
	);
	}