Why when using React useState is the payload data clearing on a onsubmit event? This is a POST reque-CodePudding

Background: I am trying to get my frontend code to connect with my backend code.
Steps Taken:

--set a breakpoint for on click event for the submit button: this returns with the event being fired however no Promise function ran and no response in the console. --tested sending data on Postman to backend and get status 200 and works (backend is set correctly and is hosted on heroku) --cleaned up POST request and set it as a promise and stored in Const Variable

Steps the code is taking:

First taking in string in each input field (name, email, question).
Using react usestate hook to use the current state and set the event.target.value as those values.
Once that is stored, then it gets stored in a variable called custData
One submit button is clicked it calls on the Variable that stores the Promise function for POST request using Axios (This is where I believe something else is occurring) *the POST is set to the correct backend URL with the values of custData which should be a string. Then it should return with response.data in the console and does not.

Below is my frontend react code for this component:

import React from 'react';
 import {useState} from 'react';
 import Axios from 'axios'
 //import { response } from 'express';


 const QuoteForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [question, setQuestion] = useState("");



  //This is the promise version 
  


   const custData =  
   { 
     "name" :name , 
    "email" :email , 
    "question":question
  } ;



  
    
    const submitPromise= () => {  
      console.log(custData);
      Axios.post('https://hookahsite-backend.herokuapp.com  || https://localhost:8000 ' , custData)
      .then( (axiosResponse)=> { 
                       // here you can use the data 
                       console.log(custData);
                       const submitQuestions = axiosResponse.data;
                       console.log(submitQuestions);
                       })
                       
      .catch((e)=> {console.log(e)})
      
      }



    //this uses try catch however the backend is not getting hit with any data
    //tested this same request in Postman and it works 
    /*
    function submitQuestion() { 
      try {
       Axios.post('https://hookahsite-backend.herokuapp.com ' ,
      {
        name:name , 
        email:email , 
        question:question
        
      },
      )
      }
      catch (err) {console.error(err);}
        }
         
*/





     return(
         <React.Fragment>



     <form id="quoteForm" 
     
     >
       <h1 id="quoteTitle">Quote Help Form</h1>
       <p id="quotePar">Please provide your Name, Contact Email, and what products you would like more information about in this form :</p>

   <label id="formName" className="Form">
     Name:
     <input type="text" name="name" 

     onChange={(event) => { setName(event.target.value);}}

     />
   </label>

   <label id="formEmail" className="Form">
     Email:
     <input type="text" name="email" 
     onChange={(event) => { setEmail(event.target.value);
     }}/>
   </label>
   <br/>
   <label id="formQuestion" className="Form" >
     What products would you like to know more about:
     <input type="text" name="help" 
     onChange={(event) => { setQuestion(event.target.value);
     }}/>
   </label>

   <br/>
   <br/>

   <button id="quoteSubmit" type="submit" 

   onClick = 
   {
     submitPromise
     
   }

   /*
   old way
      {()=>
    
    submitQuestion()
    
  }
  */

   >Submit </button>

   </form>

   ›


         </React.Fragment>

     )
 };

 export default QuoteForm;

(When I set the breakpoints this is a screen shot showing the promise is there and there seems to be an issue with data being sent as possible text and not json format)

**Any Further Help on this topic would greatly be appreciated. **

CodePudding user response：

The problem I believe lies in your Axios post call.

Axios is used like this:

Axios.post('ENDPOINT_URL', BODY)

Here ENDPOINT_URL is the URL of your api endpoint that you want to send a post request to, however you are saying to axios that the endpoint url is:

 'https://hookahsite-backend.herokuapp.com  || https://localhost:8000'

As far as I am concerned there is no logic in axios so it is trying to hit that string literally with a post request.

You should move your OR logic to other place of the application.

For example using env variables to know that you are running locally or on heroku you could do something like:

 let url;
 if (process.env.SERVER_LOCATION === "LOCAL") {
     url = "https://localhost:8000";
 } else{
     url = "https://hookahsite-backend.herokuapp.com";
 }
 axios.post(url, custData).then( // etc