createError.js:16 Uncaught (in promise) Error: Request failed with status code 400 in react

Question

iam getting bad request when registering the user and sending the info to the database iam using axios.post(apiurl.{username: user.username, password: user.password, email :user.email } and storing this code in registeruser function

and then calling it when a user submits the form

code bellow for registering users

import React, { Component } from "react";
import Form from "./form";
import joi from "joi-browser";
import {registeruser} from "../http/registeruser";

class Register extends Form {
  state = { 
    data:{
      name:"", password:"", email:""},
    errors:{}
   }

   schema={
     name: joi.string().required().label("name"),
     password: joi.string().required().min(5).label("Password"),
     email: joi.string().required().label("Email"),
   }

   doSubmit = async () =>{
    
  await registeruser(this.state.data);
}


  render() { 
    return ( <div>
      <h1>Register</h1>

      <form onSubmit={this.handleSubmit}>

      {this.renderInput("name","name","string")}
      {this.renderInput("password","Password","password")}
      {this.renderInput("email","Email","string")}

      {this.renderButton("Register")}


      </form>
      
      </div>


     );
  }
}
 
export default Register;

where is your handleSubmit function? – Mohammad Faisal Sep 21 '20 at 08:43 — Mohammad Faisal, Sep 21 '20 at 08:43
it is in my for component – Khalid Hassan Sep 21 '20 at 10:25 — Khalid Hassan, Sep 21 '20 at 10:25

score 0 · Answer 1 · answered Sep 21 '20 at 08:46

You are calling register user function wrong. your data object is not correctly built . I have provided a skeleton here . see if it helps

import React, { Component } from "react";
import Form from "./form";
import joi from "joi-browser";
import {registeruser} from "../http/registeruser";

class Register extends Form {


  state = { 

    data:{
      name:"", password:"", email:""},errors:{}
   }

   schema={
     name: joi.string().required().label("name"),
     password: joi.string().required().min(5).label("Password"),
     email: joi.string().required().label("Email"),
   }

 }

  const handleSubmit = () => {
      

      //validate properly here

      schema={
         name: joi.string().required().label("name"),
         password: joi.string().required().min(5).label("Password"),
         email: joi.string().required().label("Email"),
      }

      // build your data object properly here
      
      await registeruser(this.state.data);
    
  }


  render() { 
    return ( <div>
      <h1>Register</h1>

      <form onSubmit={ () => this.handleSubmit() }>.  // change this function so that you dont need to bind
 
      {this.renderInput("name","name","string")}
      {this.renderInput("password","Password","password")}
      {this.renderInput("email","Email","string")}

      {this.renderButton("Register")}


      </form>
      
      </div>


     );
  }
}
 
export default Register;

handlechange and validate the data is in the form class which is inherited by the register class i added the form class above — Khalid Hassan, Sep 21 '20 at 10:29

score 0 · Answer 2 · answered Sep 21 '20 at 10:28

the form component is the one to handlechange and validate data here iam going to include it


import React, { Component } from "react";
import joi from "joi-browser";
import Input from "./input";
import Select from"../select";


class Form extends Component {
  state = { 
 data: {},
errors:{}
  };
  
  validate = ()=>{
    const options = { abortEarly : false };
  const results = joi.validate(this.state.data,this.schema, options )
  
   if (!results.error) return null;
  
   console.log(results)
  
   const errors = {};
   for (let item of results.error.details) errors[item.path[0]] = item.message;
   return errors;
   
  }

  handleSubmit = e => {
    e.preventDefault();

    const errors = this.validate();
    this.setState({ errors: errors || {} });
    if (errors) return;

    this.doSubmit();
  };

  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 ;

  }

  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;

    this.setState({ data, errors });
  };


   
  
    renderButton(label) {
      return <button 
      disabled={this.validate()}
    className="btn-primary btn">{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]}
        />
      );
    }


    renderSelect(name, label, options) {
      const { data, errors } = this.state;
  
      return (
        <Select
          name={name}
          value={data[name]}
          label={label}
          options={options}
          onChange={this.handleChange}
          error={errors[name]}
        />
      );
    }
}
 
export default Form;

createError.js:16 Uncaught (in promise) Error: Request failed with status code 400 in react

2 Answers2