Getting 400 bad request while send that from react to nodejs express api

Question

Whenever m trying to send post request to nodejs express api it sending 400 bad request response so m totally confused how to figure out it first is react code from where m sending a value to node here is below:

My action:

const addcat = (category) =>{
    return {
        type:'ADD_CAT',
        category
    }
}


export const saveCat = (catData = {}) => {
    return dispatch => {
        const {
            _id = '',
            catname = '',
            cat_description = ''
        }= catData
        const category = {_id, catname, cat_description}

        return fetch('http://localhost:8000/api/categories',{
            method:'POST',
            body:JSON.stringify(catData),
            headers: {"Content-Type": "application/json"}  
        }).then(catData => dispatch(addcat(catData.category)))
    }
}

My reducer:

const catdefaultstate = []

export default (state=catdefaultstate, action) =>{
    switch(action.type){
        case 'Add_CAT':
            return [
                ...state,
                action.category
            ]
        default:
            return state
    }
}

My form from where m sending an request

import React from 'react'
// import React-dom from 'react-dom'



class Categoryform extends React.Component{
    state = {
        catname:'',
        cat_description:''
    }
    handlechange = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })

    }
    handleSubmit = (e) => {
        e.preventDefault();
        if(!this.state.catname || !this.state.cat_description){
            this.setState(() => ({error:"Enter valid name"}))
        }else{
            this.setState(()=>({error:''}))
            this.props.onSubmit({
                catname:this.state.catname,
                cat_description: this.state.cat_description
            })
        }
    }

render(){
    return(
        <div>
        {this.state.error && <p>{this.state.error}</p>}
        <form onSubmit={this.handleSubmit}>
        <input 
        type="text" 
        name="catname"
        placeholder="Enter category name"
        onChange={this.handlechange}
        value={this.state.catname}
        />
        <input 
        type="text" 
        name="cat_description"
        placeholder="Enter category decription"
        onChange={this.handlechange}
        value={this.state.cat_description}/>
        <button>Add category</button>
        </form>
        </div>
    )
}
}

export default Categoryform
// and below is from where action called

import React from 'react'
import { connect } from 'react-redux'
import Categoryform from './catform.js'
import {saveCat} from '../../actions/cataction'
const Createcat = (props) => (
    <div>
    <h1>Category form</h1>
    <Categoryform onSubmit = {(category)=>{
        props.dispatch(saveCat(category))
        props.history.push('/')
    }}/>
    </div>
);

export default connect()(Createcat)

and my express node is working properly only problem coming from react side to insert data

here is image of network tab network tab

network tab

now this is the node code screenshot where that extracting

score 0 · Answer 1 · answered Mar 05 '18 at 06:18

0

Check network tab of chrome or other browser to check what value is passed to node. Inspect element then go to network tab to check API Call. Or You can also used redux tools to check values passed in calls. Redux tool link is this

answered Mar 05 '18 at 06:18

Zeeshan Afzal Satti

440
6
13

`{"errors":{"catname":{"message":"Path `catname` is required.","name":"ValidatorError","properties":{"message":"Path `{PATH}` is required.","type":"required","path":"catname"},"kind":"required","path":"catname","$isValidatorError":true} it shows this in network tab – Akshay Sharma Mar 05 '18 at 06:26
click on particular request and check request headers and below data (querstring parameters or form data or something else to check what is passed from front end side (React) to node) – Zeeshan Afzal Satti Mar 05 '18 at 06:28
`{catname: "adsd", cat_description: "sdfasdf"} cat_description : "sdfasdf" catname : "adsd"` this what react sending to node – Akshay Sharma Mar 05 '18 at 06:31
Its fine or not ? is your Node code required this ? – Zeeshan Afzal Satti Mar 05 '18 at 06:32
Ya these are the values i am sending from form but its not working fine for this – Akshay Sharma Mar 05 '18 at 06:39
There is something wrong happen on node end. Check your node code. – Zeeshan Afzal Satti Mar 05 '18 at 06:43
node is perfectly fine m check that too the difference in node json api output and the values went from react. in node json output field name is also in quotes like this `"catname"` and the field is going from react like this `catname` so how can i solve this – Akshay Sharma Mar 05 '18 at 06:50
send snapshot of network tab and also send snapshot of node code where it extract variables – Zeeshan Afzal Satti Mar 05 '18 at 06:53
try to send data like this: https://stackoverflow.com/a/29823632/5971348. – Zeeshan Afzal Satti Mar 05 '18 at 06:57
i try that code too but still not working i out some screen shots that you ask for of network tab and node code – Akshay Sharma Mar 05 '18 at 07:13

Getting 400 bad request while send that from react to nodejs express api

1 Answers1