in redux-form, how to restrict the values of the input to a range?

Question

I want the user to be able to type numbers up to 2000, and anything beyond 2000 would be simply fed back into the input as '2000'.

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={???}
                       {...eval(`${meal}_salt_amt_1`)} />

BTW, the 'max' attribute only stops the user from using the up-arrow to increment above 2000.

And redux-form's 'validate' function doesn't restrict what can be typed.

Here is how I'm restricting the value (in state) to 2000...

export function updateStats(values) {
    for (var value in values){
        if (value.search('salt_amt') >= 0) {
            if ( values[value] > 2000) values[value] = 2000;
        }
    }
    return {
        type: UPDATE_STATS,
        stats: JSON.parse(JSON.stringify(values))
    };
}

... so far so good, because in my DevTools redux plugin, I can see the state of these values topping out at 2000.

But how do I force that state back into my redux-form input fields?

Mapping the state to props and using the prop isn't working. Doing so lets me type any number over 2000...

function mapStateToProps(state) {
    return {
        ...
        breakfast_salt_amt_1: state.stats.breakfast_salt_amt_1,
        ...
    }
}

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={breakfast_salt_amt_1}
                       {...breakfast_salt_amt_1} />

And just using the state isn't working either...

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={state.stats.breakfast_salt_amt_1}
                       {...breakfast_salt_amt_1} />

// =>  Uncaught TypeError: Cannot read property 'stats' of null

What have I forgotten?

Answer 1

This is what Normalizing is for. Something like this (untested):

const under2k = value => {
  if(value < 0) {
    return 0
  } else if(value > 2000) {
    return 2000
  } else {
    return value
  }
}

<Field
  name="breakfastSaltAmt"
  component="input"
  type="number"
  normalize={under2k}/>

Answer 2

I think this can help you:

<input type="number"   className="no-spin"
                       min="0" max="2000"
                       value={this.props.breakfast_salt_amt_1}
                       {...breakfast_salt_amt_1} />

Answer 3

export const maxLenght = max => value => {

    let v;
    let result = value.length > max;

    if(result === false) {
        v = value;
    }
    return v;
};

<Field
      name="name"
      type="text"
      component={renderField}
      label="Nome Completo *"
      placeholder="Nome Completo"
      normalize={maxLenght(10)}
    />