Closed bakhtawarsaleem closed 4 years ago
I am receiving an error, cannot figure out why, below is code in which i called the custom inputValidator component which i have created
import React, { Component } from 'react'; import { ValidatorForm } from 'react-form-validator-core'; import InputValidator from '../../components/InputValidator' class CreateUser extends Component { constructor(props) { super(props); this.state = { name: "", }; } createUser = () => { console.log("User created") } updateName = (e) => { this.setState({ name: e.target.value, }) } render() { return ( <ValidatorForm onSubmit={this.createUser} > <InputValidator onChange={this.updateName} name="name" value={this.state.name} validators={['required', 'isString']} errorMessages={['name is required', 'name is not valid']} /> <button type="submit">submit</button> </ValidatorForm> ) } } export default CreateUser
and my inputValidator component looks like this
import React from 'react'; import { ValidatorComponent } from 'react-form-validator-core'; class InputValidator extends ValidatorComponent { render() { const { errorMessages, validators, requiredError, validatorListener, ...rest } = this.props; return ( <div> <input {...rest} ref={(r) => { this.input = r; }} /> {this.errorText()} </div> ); } errorText() { const { isValid } = this.state; if (isValid) { return null; } return ( <div style={{ color: 'red' }}> {this.getErrorMessage()} </div> ); } } export default InputValidator;
the error i am receiving is the following
my package.json is this
{ "name": "my_app", "private": true, "dependencies": { "@apollo/client": "^3.1.1", "@babel/preset-react": "^7.10.4", "@material-ui/core": "^4.11.0", "@material-ui/icons": "^4.9.1", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "4.2.2", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "bootstrap": "^4.4.1", "graphql": "^15.3.0", "jquery": "3.4.1", "popper.js": "^1.16.1", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", "react-form-validator-core": "^1.0.0", "react-router-dom": "^5.2.0", "react_ujs": "^2.6.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.0" } }
Please I need help with this
@bakhtawarsaleem hi this package was updated with breaking changes so usage was changed see migration guide for details
I am receiving an error, cannot figure out why, below is code in which i called the custom inputValidator component which i have created
and my inputValidator component looks like this
the error i am receiving is the following
my package.json is this
Please I need help with this