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;
Monu Patil
  • 345
  • 5
  • 18
  • https://stackoverflow.com/questions/50107816/react-proxy-error-could-not-proxy-request-api-from-localhost3000-to-http-l Does this respond to your question? – Soufiane Boutahlil Jan 17 '21 at 12:31
  • Does this answer your question? [React Proxy error: Could not proxy request /api/ from localhost:3000 to http://localhost:8000 (ECONNREFUSED)](https://stackoverflow.com/questions/50107816/react-proxy-error-could-not-proxy-request-api-from-localhost3000-to-http-l) – Ajay Lingayat Jan 17 '21 at 18:11

0 Answers0