I am creating a multistep form where a value (or multiples) of a form field determine whether a subsequent step is shown.
For example, the data I am receiving looks like:
{
cardConditional:
lessThan: 75
show: true
when: "fieldKeyHere"
...
}
This is basically telling me, if the when is lessThan 75 show the step. it can return greaterThan or eq as well which i've accounted for in the code below. My question is how can i take that information and construct a function to return true or false depending on that? I guess im stuck on how to string together that conditional with the string from getMathSymbol.
Here's what i have so far:
const checkStepConditional = (step) => {
const getMathSymbol = () => {
if (step.cardConditional.eq) return "===";
else if (step.cardConditional.lessThan) return "<";
else if (step.cardConditional.greaterThan) return ">";
};
if (step.cardConditional) {
const conditionalFieldKey = step.cardConditional.when;
return form.values[conditionalFieldKey] <-- stuck here
} else {
return true;
}
};
You can create an object keyed by the conditions which each implements the method necessary for the comparison, and use an every() on the conditions that exist in your cardConditional object to check of all conditions match.
const checkStepConditional = (form, step) => {
const checkIf = {
eq: (a, b) => a === b,
lessThan: (a, b) => a < b,
greaterThan: (a, b) => a > b,
}
if (step.cardConditional) {
const cardCond = step.cardConditional;
const field = form.values[cardCond.when];
const conditions = Object.keys(checkIf).filter(k => k in cardCond);
return conditions.every(condition => checkIf[condition](field, cardCond[condition]))
? cardCond.show
: !cardCond.show
}
};
const
card = { cardConditional: { lessThan: 75, show: true, when: "fieldKeyHere", } },
form = { values: { "fieldKeyHere": 60 } };
console.log(checkStepConditional(form, card));
// 60 < 75 ? show: true
const
card1 = { cardConditional: { lessThan: 75, greaterThan: 60, show: true, when: "fieldKeyHere", } },
form1 = { values: { "fieldKeyHere": 65 } };
console.log(checkStepConditional(form1, card1));
// 65 < 75 && 65 > 60 ? show: true
const
card2 = { cardConditional: { lessThan: 75, greaterThan: 60, show: true, when: "fieldKeyHere", } },
form2 = { values: { "fieldKeyHere": 55 } };
console.log(checkStepConditional(form2, card2));
// 55 < 75 && 55 > 60 ? show: false