Post request from React to Node/ Express is console logging an empty object

Question

I know there have been other submissions on this topic. I have looked through all of the top hits, but I still can't find a solution.

When doing a post request, I am only getting a console log of an empty object from the server. Where am I going wrong? Thanks in advance!

React form and component

    import {useState} from 'react';

const StockInput = () => {

    const [ticker, setTicker] = useState('')

   
    const handleSubmit = (e) => {
         e.preventDefault();
    
        fetch(`http://localhost:5000/api/ticker`, {
             method: 'POST',
             headers: {"Content-Type": "application/json"},
             body: JSON.stringify(ticker)
         }).then(() => {
             console.log(ticker)
         })
    }

    return (
        <form onSubmit = {handleSubmit}>

            <input 
                type='text' 
                onChange={(e) => setTicker(e.target.value)}
                name='tickerInput'
                value={ticker}
            />
            <button>Submit</button>
        </form>
    );
}

export default StockInput;

Express File

    const express = require('express')
const app = express()
const cors = require('cors')


app.use(express.urlencoded({ extended: true }));

app.use(cors())


app.use('/api/', require('./routes/optionRoute'))

app.post('/api/ticker/', (req,res) => {
   console.log(req.body)
})



const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
    console.log(`app listening on port ${PORT}`)
})

Proxy

  "name": "option_scan_next",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

If I put in a console.log(ticker) in the handleSubmit before the fetch ticker is populated with e.target.value from input. — Michael Norris
– Michael Norris, Commented Jul 27, 2021 at 13:07
The fetch().then( console.log() ) <-- that console.log is not consoling out. — Michael Norris
– Michael Norris, Commented Jul 27, 2021 at 13:09

Adam Farver · Accepted Answer · 2021-07-27 15:06:43Z

1

Express File:

Get your value by adding the default middleware to pull out JSON body to your req.body in place of the urlencoded type.

app.use(express.json());
// app.use(express.urlencoded({ extended: true }));

FrontEnd React Component:

You need to put your ticker value in an object, not just sending the value by itself.

const handleSubmit = (e) => {
     e.preventDefault();
// Add This.
    const body = {data: ticker}
// End


    fetch(`http://localhost:5000/api/ticker`, {
         method: 'POST',
         headers: {"Content-Type": "application/json"},
         body: JSON.stringify(body) // insert object into here.
     }).then((res) => {
         console.log(`Response: ${res}`)
     })
}

answered Jul 27, 2021 at 15:06

Adam Farver

482 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Post request from React to Node/ Express is console logging an empty object

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related