1

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.

https://ibb.co/KbpwqZv

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;
2

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.