Get default value from query params + repeating code

Question

The main goal of this task is to take values from the query parameter and put it in inputu. The first problem is that I don't know much about how to do it so that the code doesn't repeat itself and I don't know how specifically I could improve the code so that multiple things don't happen again. Next, the function should contain a simple validation of min max to prevent them from entering silliness from the query parameter.

getFromQuery = props => {
 const { limitValues } = props;
 const parsed = queryString.parse(location.search);
 const validation = (value, min, max) => {
 if (value < min) {
 return min;
 } else if (value > max) {
 return max;
 }
 return value;
 };
 if (parsed.price) {
 const defautPrice = limitValues.find(item => item.sliderType === 'PRICE');
 props.inputs.PRICE = validation(parsed.price, defautPrice.minValue, defautPrice.maxValue);
 }
 if (parsed.savings) {
 const defautSavings = limitValues.find(item => item.sliderType === 'SAVINGS');
 props.inputs.SAVINGS = validation(parsed.savings, defautSavings.minValue, defautSavings.maxValue);
 }
 if (parsed.maturity) {
 const defautMaturity = limitValues.find(item => item.sliderType === 'MATURITY');
 props.inputs.MATURITY = validation(parsed.maturity, defautMaturity.minValue, defautMaturity.maxValue);
 }
};

• Paul: I was little refactor, but still there is space to improve, for any help I will be so glad.

Answer 1

The validation function:

const validation = (value, min, max) => {
 if (value < min) {
 return min;
 } else if (value > max) {
 return max;
 }
 return value;
};

Bounds the value between some minimum and maximum, can can be simplified to the following:

const validation = (value, min, max) => Math.max(min, Math.min(value, max));

For the rest, each "case" abstractly searches the limitValues array for a matching object by slider type, and then bounds the input value for that case. A general purpose utility could look like the following:

const processField = (key, fieldValue) => {
 const val = limitValues.find(({ sliderType }) => sliderType === key);
 props.inputs[key] = val
 ? validation(fieldValue, val.minValue, val.maxValue)
 : fieldValue;
};

Since Array.prototype.find can potentially return undefined for no matches, you should guard check this. the second line uses a ternary to check if a defined value was returned from the find and returns the bounded field value otherwise returns the unbounded field value.

Here is your updated example code:

const validation = (value, min, max) => Math.max(min, Math.min(value, max));
...
getFromQuery = (props) => {
 const { limitValues } = props;
 const parsed = queryString.parse(location.search);
 const processField = (key, fieldValue) => {
 const val = limitValues.find(({ sliderType }) => sliderType === key);
 // Mutates props object
 props.inputs[key] = val
 ? validation(fieldValue, val.minValue, val.maxValue)
 : fieldValue;
 };
 if (parsed.price) {
 processField("PRICE", parsed.price);
 }
 if (parsed.savings) {
 processField("SAVINGS", parsed.savings);
 }
 if (parsed.maturity) {
 processField("MATURITY", parsed.maturity);
 }
};