TypeError: Cannot read property 'validate' of undefined?

import Joi from “joi-browser”;

import Form from “./common/form”;

export default class LoginForm extends Form {

state = {

data: { username: "", password: "" },

errors: {},

};

schema = {

username: Joi.string().required().label("Username"),

password: Joi.string().required().label("Password"),

};

doSubmit = () => {

// call the server

console.log("Form Submitted");

};

render() {

return (

  <div>

    <h1>Login</h1>

    <form onSubmit={this.handleSubmit}>

      {this.renderInput("username", "Username")}

      {this.renderInput("password", "Password", "password")}

      {this.renderButton("Login")}

    </form>

  </div>

);

}

}

Form.jsx

import React, { Component } from “react”;

import { Joi } from “joi-browser”;

import Input from “./input”;

export default class Form extends Component {

state = {

data: {},

errors: {},

};

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;

/* const errors = {};

const { data } = this.state;

if (data.username.trim() === "")

  errors.username = "Username is required";

if (data.password.trim() === "")

  errors.password = "Password is required";

return Object.keys(errors).length === 0 ? null : 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;

};

handleSubmit = (e) => {

e.preventDefault();

const errors = this.validate();

this.setState({ errors: errors || {} });

if (errors) return;

this.doSubmit();

};

handleChange = ({ currentTarget: input }) => {

const errors = { ...this.state.errors };

const errorMessage = this.validateProperty(input);

if (errorMessage) errors[input.name] = errorMessage;

else delete errors[input.name];

const data = { ...this.state.data };

data[input.name] = input.value;

// data[e.currentTarget.name] = e.currentTarget.value;

this.setState({ data, errors });

//handle single input

/*

const data = { ...this.state.data };

data.username = e.currentTarget.value;

this.setState({ data });

*/

};

renderButton(label) {

return (

  <button disabled={this.validate()} className="btn btn-primary">

    {label}

  </button>

);

}

renderInput(name, label, type = “text”) {

const { data, errors } = this.state;

return (

  <Input

    type={type}

    name={name}

    value={data[name]}

    label={label}

    onChange={this.handleChange}

    error={errors[name]}

  />

);

}

}

“Cannot read property ‘validate’ of undefined”? Anyone can help in finding the error.

Is there any more to that error? For example a stack trace that might help us figure out which variable is undefined? What have you tried so far?

@programmingwithmosh can you please help us here? Having the same issue!

@shan72023 any luck solving this?

Hey guys. I had the exact same issue and couldn’t figure it out for half an hour. The problem is with the import of Joi inf form.jsx. you are using
import { Joi } from “joi-browser”;
you need be using
import Joi from “joi-browser”;

This is because VSCode assumes you want the named export and not the default export but you actually need the default export to access the validate method.

Hope this helps!

Hi,

If you’re using more up-to-date version of Joi package, the syntax has been changed so it might be the reason that you’re getting this error: