react-validation icon indicating copy to clipboard operation
react-validation copied to clipboard

Error creating custom components

Open AJDray opened this issue 8 years ago • 0 comments

I received the following error attempting to create a new custom component.

Warning: Failed child context type: Invalid child context components.test of type CustomInput supplied to Form, expected instance of Base.

So I got this trying to follow the instructions on the Readme.md file so I decided to try and create a copy of the an email input by finding the code for it in the libs/components folder.

Note I'm using typescript

import * as React from 'react';
import { inputFactory } from 'react-validation/lib/build/validation.rc';

class ValidatableComponent extends React.Component<any, any> {
    render() {
        const { containerClassName, hint, ...rest } = this.props;

        return (
            <div className={containerClassName}>
                <input
                  {...rest}
                  className={this.props.className}
                  onChange={this.props.onChange}
                  onBlur={this.props.onBlur}
                  value={this.props.value}
                />
                {hint}
            </div>
        );
    }
}

export default inputFactory(ValidatableComponent);

The using it I have:

<ValidatableComponent name="test" id="test" type="email" value={this.props.emailAddress} validations={['required', 'email']} />

Note I tried using the package from npm but noted that it seemed to be missing inputFactory so I am using the following reference in my package.json:

"react-validation": "git+https://github.com/Lesha-spr/react-validation.git",

AJDray avatar Aug 11 '17 16:08 AJDray