@piscium2010/v-form/src/Field.js

This is not a form, instead it is only a form shell of which the single responsibility is validating and providing error messages. Capable of definding flexiable rules and validating multi fields at a time.

import React from 'react'
import { VFormContext } from './Context'

export default function FieldHOC(C) {
    return class Field extends React.Component {
        static contextType = VFormContext
        constructor(props) {
            super(props)
            if (!props.name) { throw 'prop name is required for field component created by VForm.fieldFactory' }
        }

        render() {
            if (this.context.name !== 'VForm') {
                throw 'Please wrap field components under component VForm'
            }
            const { name, messages, children, ...restProps } = this.props
            const { validation } = this.context
            const message = typeof messages === 'string' ? messages : ''
            return (
                <C name={name} message={message} v={validation} {...restProps}>
                    {children}
                </C>
            )
        }
    }
}