I'm sending some data from my ReactJS front-end application to my node/express backend, however, whenever I send the data, I get the error message mentioned in the title.
contact.js
This is my react js code where i declare my react from those who communicate with backend via axios
import React, { useState } from 'react'
import "./Contact.css";
import Axios from 'axios';
import {API} from '../backend';
const Contact = () => {
const [state,setState]= useState({
name:'',
lastname:'',
email:'',
message:'',
})
const [result,setResult] = useState(null);
const sendMail = e =>{
e.preventDefault();
Axios.post('/send',{...state})
.then(response => {
setResult(response.data);
setState({
name:'',
lastname:'',
email:'',
message:''
})
})
.catch(()=>{
setResult({
success:false,
message:"Something went wrong. Try again later"
})
setState("");
})
}
const onInputChange = e =>{
const {name,value} = e.target;
setState({
...state,
[name]: value
})
}
console.log("API is",API);
return (
<>
{result && (
<p className={`${result.success ? 'success' : 'error'}`}>
{result.message}
</p>
)}
<section className='contactus'>
<div className="container">
<h1 className='title'>CONTACT US</h1>
<form >
<div className="singleItem">
<label htmlFor="name">Name</label>
<input type="text"
name="name"
className="name"
placeholder="Your Name..."
value={state.name}
onChange={onInputChange}
/>
</div>
{/* <div className="singleItem">
<label htmlFor="Lastname">LastName</label>
<input type="text"
name="LastName"
className="LastName"
placeholder="Your Last Name..."
value={state.lastname}
onChange={onInputChange}
/>
</div> */}
<div className="singleItem">
<label htmlFor="email">Email</label>
<input type="email"
name="email"
className="email"
placeholder="Your Email..."
value={state.email}
onChange={onInputChange}
/>
</div>
<div className='textArea singleItem'>
<label htmlFor="message">Message</label>
<textarea name="message"
id=""
col="30"
rows="5"
placeholder="Your Message..."
value={state.message}
onChange={onInputChange}
>
</textarea>
</div>
<div className="msg">Message has been Sent</div>
<button type="button" className='btn btn-primary' onClick={sendMail}>Submit</button>
</form>
</div>
</section>
</>
)
}
export default Contact;