Validation does not get new fields value - reactjs

Question

I am using react-final-form to create Registration and Login Forms. I have created file called validators with 3 functions: required, allowedEmails, and validatePassword length. Then I used them in my fields with validate={required} or validate={this.composeValidators(required, validatePasswordLength)}, if I wanted to use more than two validators for my fields.
I have 5 fields: FirstName, LastName, Username, Email and password. At the beginning when the fields are empty everything works well. All of them show error:
"This field is required"
but when I try to enter some value in the specific field, the error for that field still remains.
Here is sandbox link to my project https://codesandbox.io/s/forma-ktvjq
This are functions in my validators file:
export function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
export const required = v => {
if(!v || v === ' '){
return 'This field is requireddd';
}
return undefined;
}
export const allowedEmails = v =>{
if (v === validateEmail) {
return "email is not valid";
}
return undefined;
};
export const validatePasswordLength = v => {
if(v){
if(v.length<8){
return "Password has to be atleast 8 charachters";
}
return "Password accepted";
}
import validators, { required, validatePasswordLength, allowedEmails, validateEmail } from '../../validators';
import LoginForm from '../LoginForm';
// import Container from 'react-bootstrap/Container';
// import Row from 'react-bootstrap/Row';
// import Col from 'react-bootstrap/Col';
import React, { Component } from 'react';
import { Form, Field } from 'react-final-form';
import { InputPassword, InputEmail, InputUsername, InputFirstName, InputLastName, InputField} from '../.././../components/InputFields';
import Button from 'react-bootstrap/Button'
import { metaProperty } from '#babel/types';
import { withRouter } from 'react-router-dom';
class RegisterForm extends Component {
sleep = ms => new Promise(res => setTimeout(res, ms));
newPage = (newPage) => {
this.props.history.push('/login');
};
handleSubmit = async (values,e) => {
e.preventDefault()
await this.sleep(300);
console.log("values", values);
this.newPage();
};
composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined);
render(){
return (
<div>
<h1>🏁 Register Form</h1>
<br>
</br>
<br></br>
<Form
onSubmit={this.handleSubmit.bind(this)}
render={ ( { handleSubmit, values, submitting, meta }) => (
<form onSubmit={handleSubmit}>
<Field
name="firstName"
component={InputField}
hintText="First Name"
floatingLabelText="First Name"
validate={required}
type="text"
/>
<Field
name="lastName"
component={InputField}
hintText="Last Name"
floatingLabelText="Last Name"
validate={required}
type="text"
/>
<Field
name="username"
component={InputField}
hintText="UserName"
floatingLabelText="username"
validate={required}
type="text"
/>
<Field
name="password"
component={InputField}
hintText="Password"
floatingLabelText="Password"
validate={this.composeValidators(required, validatePasswordLength)}
type="password"
/>
<Field
name="email"
component={InputField}
hintText="email"
floatingLabelText="Email"
validate={this.composeValidators(required, allowedEmails)}
type="email"
/>
<Button size="lg" type="submit">Register</Button>
</form>
) } />
</div>
);
};
}
export default RegisterForm;
Here is also my third party component that i am using in Field as component.
import { Form, Field } from 'react-final-form';
import LoginForm from '../containers/forms/LoginForm';
import RegisterForm from '../containers/forms/RegisterForm';
import './InputFields.css'
export const InputField = (props) => {
console.log("PROOOPS ", props);
return(
<div>
<InputGroup size="lg" className="mb-4">
<FormControl
placeholder={props.floatingLabelText}
type={props.input.type}
/>
</InputGroup>
<div className="ValidatorStyle" >
{props.meta.error && props.meta.touched && <span>{props.meta.error}</span>}
</div>
</div>
)}
I don't get any error, but the field value does not get updated.

Answer 1

In InputField.js you need to spread the input props on InputGroup, like:
<InputGroup size="lg" className="mb-4" {...props.input}>
(That includesvalue, onChange and more)