AssertionError: Invalid schema content: (undefined)

Hello coders,
I have been taking React lessons with codewithmosh.com in the last few weeks.
Until the topic ‘Forms - Validating a Form Using Joi’ I am facing with this problem when I want to enter my username (or password) in the field.
I have followed one by one the code shown by Mosh in the tutorial but I am the only one who has the problem.
Anyone help?
Thank you.


(loginForm.jsx)


import React, { Component } from “react”;

import Input from “./input”;

import Joi from “joi-browser”;

class LoginForm extends Component {

state = {

account: { username: "", password: "" },

errors: {},

};

schema = {

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

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

};

validate = () => {

const options = { abortEarly: false };

const result = Joi.validate(this.state.account, this.schema, options);

if (!result.error) return null;

const errors = {};

for (let item of result.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 ? null : error.details[0].message;

// if (name === "username") {

//   if (value.trim() === "") return "Username is required.";

// }

// if (name === "password") {

//   if (value.trim() === "") return "Password is required.";

// }

};

handleSubmit = (e) => {

e.preventDefault();

const errors = this.validate();

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

if (errors) return;

};

handleChange = (e) => {

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

const errorMessage = this.validateProperty(e);

if (errorMessage) {

  cloneErrors[e.name] = errorMessage;

} else {

  delete cloneErrors[e.name];

}

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

account[e.currentTarget.name] = e.currentTarget.value;

this.setState({ account, errors: cloneErrors });

};

render() {

return (

  <div>

    <h1>Login</h1>

    <form onSubmit={this.handleSubmit}>

      <Input

        name="username"

        value={this.state.account.username}

        label="Username"

        onChange={this.handleChange}

        error={this.state.errors.username}

      />

      <Input

        name="password"

        value={this.state.account.password}

        label="Password"

        onChange={this.handleChange}

        error={this.state.errors.password}

      />

      <button className="btn btn-primary">Login</button>

    </form>

  </div>

);

}

}

export default LoginForm;


(input.jsx)


import React from “react”;

const Input = (props) => {

return (

<div className="form-group">

  <label htmlFor={props.name}>{props.label}</label>

  <input

    autoFocus

    value={props.value}

    onChange={props.onChange}

    type="text"

    className="form-control"

    id={props.name}

    name={props.name}

  />

  {props.error && <div className="alert alert-danger">{props.error}</div>}

</div>

);

};

export default Input;

p / s: Sorry for my English.

Hello, lanzslumber85!
Did you solve this problem? I’m facing the same situation, maybe there’s something related to the Joi library.
Hope anyone help us!
Regards

×

AssertionError: Invalid schema content: ([object HTMLInputElement])

:arrow_forward: 5 stack frames were collapsed.

LoginForm.Form.validateProperty

src/components/common/form.jsx:22

  19 | validateProperty = (name, value) => {  20 |   const obj = { [name]: value };  21 |   const schema = { [name]: this.schema[name] };> 22 |   const { error } = Joi.validate(obj, schema);     | ^  23 |   return error ? error.details[0].message : null;  24 | };  25 | 

View compiled

Form.handleChange

src/components/common/form.jsx:36

  33 | };  34 | handleChange = ({ currentTarget: input }) => {  35 |   const errors = { ...this.state.errors };> 36 |   const errorMessage = this.validateProperty(input);     | ^  37 |   if (errorMessage) errors[input.name] = errorMessage;  38 |   else delete errors[input.name];  39 | 

I’m facing this issue too, has anyone been able to find a solution to it?

1 Like