I don't know why the data is not sending to the backend.

The API is working perfectly when I tested it on Insomnia. I have even added new users to the database using the API but when I try to add new users from react using redux and axios, it doesn't go instead I get a response saying the fields can't be empty.

I have tried to console.log all the data I'm sending and all the fields are populated properly. I don't know what I'm doing wrong.

I used express-validator for checking inputs as well as normal error handling that's why I get the response that filed is empty.

This is my code sending the data in redux

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json"
        },
        body : JSON.stringify(data)
    }

    console.log(config.body)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

React Form ponent

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import AuthLayout from './AuthLayout'
import Layout from './Layout'
import {connect} from 'react-redux'
import {signin} from '../store/actions/authAction'
import axios from 'axios'

function SignIn({signin}) {

    const [value, setValue] = useState({
        email : '',
        password : ''
    })

    const handleChange = (e) => {
        setValue({
            ...value,
            [e.target.name] : e.target.value
        })
    }

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

        const {email, password} = value

        const oldUser = {
            email,
            password
        }

        axios({method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json; charset=UTF-8",
            "Accept":"Token",
            "Access-Control-Allow-Orgin":"*",
        },
        body : JSON.stringify(oldUser)})
        .then(res => console.log(res.data))
        .catch(err => console.log(err.response.data))
        
    }

    return (
       <AuthLayout>
          <div className="form_container" style={bg}>
            <div className="form_title">
                <h2>Sign In</h2>
                
            </div>
            <form onSubmit={handleSubmit}>
                <div className="form_div">
                    <input type="text" placeholder="Enter Email" name="email" value={value.email} onChange={handleChange} />
                </div>
                <div className="form_div">
                    <input type="number" placeholder="Enter Password" name="password" value={value.password} onChange={handleChange} />
                </div>
                <div className="form_div form_btn">
                    <button>Submit</button>
                </div>
                <div className="form_div checkbox">
                    <input type="checkbox" />
                    <h4>Remember me</h4>
                </div>
            </form>
                <p>Don't have an account? <Link to="/signup"><span>Sign up</span></Link> </p>
                
          </div>
       </AuthLayout>
    )
}

const bg = {
    backgroundImage: 'url(image/Group1.svg)'
}

const mapStateToProps = state => {

    return{
        user : state.auth.user
    }
}



export default connect(mapStateToProps, {signin})(SignIn)

I didn't include the backend because is working very well.

I don't know why the data is not sending to the backend.

The API is working perfectly when I tested it on Insomnia. I have even added new users to the database using the API but when I try to add new users from react using redux and axios, it doesn't go instead I get a response saying the fields can't be empty.

I have tried to console.log all the data I'm sending and all the fields are populated properly. I don't know what I'm doing wrong.

I used express-validator for checking inputs as well as normal error handling that's why I get the response that filed is empty.

This is my code sending the data in redux

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json"
        },
        body : JSON.stringify(data)
    }

    console.log(config.body)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

React Form ponent

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import AuthLayout from './AuthLayout'
import Layout from './Layout'
import {connect} from 'react-redux'
import {signin} from '../store/actions/authAction'
import axios from 'axios'

function SignIn({signin}) {

    const [value, setValue] = useState({
        email : '',
        password : ''
    })

    const handleChange = (e) => {
        setValue({
            ...value,
            [e.target.name] : e.target.value
        })
    }

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

        const {email, password} = value

        const oldUser = {
            email,
            password
        }

        axios({method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json; charset=UTF-8",
            "Accept":"Token",
            "Access-Control-Allow-Orgin":"*",
        },
        body : JSON.stringify(oldUser)})
        .then(res => console.log(res.data))
        .catch(err => console.log(err.response.data))
        
    }

    return (
       <AuthLayout>
          <div className="form_container" style={bg}>
            <div className="form_title">
                <h2>Sign In</h2>
                
            </div>
            <form onSubmit={handleSubmit}>
                <div className="form_div">
                    <input type="text" placeholder="Enter Email" name="email" value={value.email} onChange={handleChange} />
                </div>
                <div className="form_div">
                    <input type="number" placeholder="Enter Password" name="password" value={value.password} onChange={handleChange} />
                </div>
                <div className="form_div form_btn">
                    <button>Submit</button>
                </div>
                <div className="form_div checkbox">
                    <input type="checkbox" />
                    <h4>Remember me</h4>
                </div>
            </form>
                <p>Don't have an account? <Link to="/signup"><span>Sign up</span></Link> </p>
                
          </div>
       </AuthLayout>
    )
}

const bg = {
    backgroundImage: 'url(image/Group1.svg)'
}

const mapStateToProps = state => {

    return{
        user : state.auth.user
    }
}



export default connect(mapStateToProps, {signin})(SignIn)

I didn't include the backend because is working very well.

• javascript
• reactjs
• react-redux
• axios

3 Answers 3

Thanks to everyone that has helped me to understand the problem, I appreciate all your effort.

I tried some of the solutions presented to me here but it didn't work.

So what I later did was to remove the body variable and replaced it with data in the config object and it started working.

This is the code:

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json",  
        },
        data : JSON.stringify(data)
    }

    console.log(config.data)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

I don't know if is the best solution but in this context, it has worked for me.

This should be changed to fetch,

axios.post('url', 'body', 'headers')

the above is the actual structure of the Axios should be used.

Try the above.

JSON.stringify is not required here

body : JSON.stringify(data),

use

body: data,

because data is stringified in axious by itself, if you feed it already stringified data, you'll have extra escaped json that cannot be considered valid json as backend server