POST method with 'res' returning value, but playing null on 'date'

Question

I am trying to make a POST request in an API created in Springboot and when running the React application I get the date to have the desired value.

But when will I pull the res.data it returns the values as null. In Postman the API is working normal, I just need to pass the name and value of the product and already write in the database.

Below the console log and React code:

{data: {…}, status: 200, statusText: "", headers: {…}, config: {…}, …}config: {url: "http://localhost:8081/api/produtos/", method: "post", data: "{"nome":"teste","preco":123}", headers: {…}, transformRequest: Array(1), …}data: {id: 168, nome: null, preco: 0}headers: {content-type: "application/json"}request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}status: 200statusText: ""__proto__: Object Form.jsx:30 {id: 168, nome: null, preco: 0}

import React, { useState } from "react";
import "./Form.css";
import { Link } from "react-router-dom";
import { Form, Row, Col, Button } from "react-bootstrap";
import axios from 'axios'

export default function FormProdutos() {
  const [nome, setNome] = useState("");
  const [preco, setPreco] = useState(0); 
  

  

  let handleChangeNome = (event) => {
    let nome = event.target.value;
    setNome(nome);
  };

  let handleChangePreco = (event) => {
    let preco = event.target.value;
    setPreco(+preco);
  };

  let handleSubmit = async (event) => {
    event.preventDefault();        
    
    await axios.post("http://localhost:8081/api/produtos/", {nome, preco})
      .then(res=> {
        console.log(res)
        console.log(res.data)
      })
     
    // window.alert("Produto cadastrado com sucesso!");
  };

  

  return (
    <div className="containerMain">
      <div>
        <Form className="containerForm" onSubmit={handleSubmit}>
          <Form.Group as={Row}>
            <Form.Label column sm={2}>
              Nome do Produto
            </Form.Label>
            <Col sm={10}>
              <Form.Control
                type="text"
                placeholder="Nome do produto"
                onChange={handleChangeNome}
              />
            </Col>
          </Form.Group>

          <Form.Group as={Row}>
            <Form.Label column sm={2}>
              Preço
            </Form.Label>
            <Col sm={10}>
              <Form.Control
                type="number"
                placeholder="Preço"
                onChange={handleChangePreco}
              />
            </Col>
          </Form.Group>

          <Form.Group as={Row}>
            <Col sm={{ span: 10, offset: 2 }}>
              <Button type="submit">
                Cadastrar
              </Button>
            </Col>
          </Form.Group>

          <Form.Group as={Row}>
            <Col sm={{ span: 10, offset: 2 }}>
              <Button variant="primary">
                <Link to="/" className="link">
                  Voltar para Home
                </Link>
              </Button>
            </Col>
          </Form.Group>
        </Form>
      </div>
    </div>
  );
}

Answer 1

The problem was the content type that was wrong, it had to be 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'

To set up right follow the link steps: https://stackoverflow.com/questions/35325370/how-do-i-post-a-x-www-form-urlencoded-request-using-fetch