Use Joi in React

1

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
2

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
3

the mastering react course needs updating

4

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 |
5

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