Curried Function Pipelines for Immutable Array Form Validations

import React, { useState } from 'react';
 
const createValidator = (...rules) => (fieldValue) => 
  rules.reduceRight((errors, ruleFn) => {
    const result = ruleFn(fieldValue);
    return result ? errors.concat(result) : errors;
  }, []);
 
const minLength = (min) => (val) => val.length < min ? `Must be at least ${min} chars` : null;
const requiresDigit = () => (val) => /\d/.test(val) ? null : "Must contain at least one digit";
 
const validatePassword = createValidator(minLength(8), requiresDigit());
 
export function PasswordValidatorInput() {
  const [value, setValue] = useState('');
  const [errors, setErrors] = useState([]);
 
  const handleChange = (e) => {
    const val = e.target.value;
    setValue(val);
    setErrors(validatePassword(val));
  };
 
  return (
    <div>
      <input type="password" value={value} onChange={handleChange} />
      {errors.flatMap(err => err ? [err] : []).map((err, idx) => (
        <p key={idx} style={{ color: 'red' }}>{err}</p>
      ))}
    </div>
  );
}