Use Joi in React

Hi,
The Joi.validate is changed to scheme.validate. Course 18 under the Forms category is not working with new Joi. please assist me with connection form.jsx with loginForm.jsx

for example
validate = () => {
const options = { abortEarly: false };
const { error } = schema.validate(this.state.data, this.schema, options);

2 Likes

I found the solution and keep it here maybe help someone
loginForm
schemaMap = {

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

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

};

schema = Joi.object(this.schemaMap);


form

validate = () => {

// console.log("schema=", this.schemaMap);

const options = { abortEarly: false };

const { error } = this.schema.validate(this.state.data, options);

if (!error) return null;

const errors = {};

for (let item of error.details) errors[item.path[0]] = item.message;

return errors;

};

validateProprty = ({ name, value }) => {

const obj = { [name]: value };

const schema = Joi.object({ [name]: this.schemaMap[name] });

const { error } = schema.validate(obj);

return error ? error.details[0].message : null;

};

2 Likes

the mastering react course needs updating

1 Like

I have ran into this issue after using your correction. Any assistance?

TypeError: this.validateProperty is not a function

Form.handleChange

src/components/common/form.jsx:37

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

Main problem for me was auto import, it imported {Joi} from ‘joi-browser’
But making it only Joi fixed the issue