submit button disabled when logging in a user - node.js

Question

Hi I am making the logging in functionality and for some reason when I
fill in all the input fields my button stays disabled and I cant submit it.
this is the renderButton function...
renderButton(label) {
return (
<button
disabled={this.validate() ? true : false}
className="btn btn-primary"
>
{label}
</button>
);
}
this is the login form...
import React, { Component } from "react";
import Joi from "joi-browser";
import Form from "./form";
import { login } from "../services/authService";
class LoginForm extends Form {
state = {
data: { username: "", password: "" },
errors: {}
};
schema = {
email: Joi.string()
.required()
.label("Email"),
password: Joi.string()
.required()
.label("Password")
};
doSubmit = async () => {
//call server
const { data } = this.state;
await login(data.email, data.password);
};
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
{this.renderInput("email", "Email")}
{this.renderInput("password", "Password", "password")}
{this.renderButton("Login")}
</form>
</div>
);
}
}
export default LoginForm;
this is the validation functions where both validate and vaidate property is in it...
validate = () => {
const options = { abortEarly: false };
const { error } = Joi.validate(this.state.data, this.schema, options);
if (!error) return null;
const errors = {};
for (let item of error.details) errors[item.path[0]] = item.message;
return errors;
};
validateProperty = ({ name, value }) => {
const obj = { [name]: value };
const schema = { [name]: this.schema[name] };
const { error } = Joi.validate(obj, schema);
return error ? error.details[0].message : null;
};

Answer 1

Looks like the render function is not called each time your input changes, maybe it is because you are extending some Form and not React. It is anti pattern to make a deep nesting, just extend React, if you want to add some functionality you can wrap your component with HOC (higher order component function).