Can’t transfer data from React form to DATA.txt using Express.js
I try many things but it always gives me same error ,i tried to change file path but it was pointles (currently my project looks kile this:{nodemodules,public,scr(there are all files including App.jsx),DATA.txt,server.js} ,chatgtp isn’t helping as well.I run out of ideas.
*here is my error:(Failed to load resource: the server responded with a status of 404 (Not Found)
App.jsx:33 Error submitting form: AxiosErrorcode: “ERR_BAD_REQUEST”config: {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}message: “Request failed with status code 404″name: “AxiosError”request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}response: {data: ‘nnn<meta char…nn

Cannot POST /

nnn’, status: 404, statusText: ‘Not Found’, headers: AxiosHeaders, config: {…}, …}stack: “AxiosError: Request failed with status code 404n at settle (http://localhost:3000/static/js/bundle.js:42609:12)n at XMLHttpRequest.onloadend (http://localhost:3000/static/js/bundle.js:41269:66)n at Axios.request (http://localhost:3000/static/js/bundle.js:41770:41)n at async handleSubmit (http://localhost:3000/static/js/bundle.js:50:7)”[[Prototype]]: Error) *

server.js

const express = require("express");
const fs = require("fs");
const bodyParser = require("body-parser");

const app = express();
const PORT = 3000;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

app.post("/", (req, res) => {
  const appData = req.body;
  fs.appendFile("data.txt", JSON.stringify(appData) + "n", (err) => {
    if (err) throw err;
  });
  res.send("Data has been successfully submitted!");
});

app.listen(PORT);

App.jsx

import React, { useState } from 'react';
import axios from 'axios';

const App = () => {
    const [appData, setAppData] = useState({
        firstName: '',
        lastName: '',
        email: '',
        phoneNumber: '',
        country: '',
        paymentType: ''
    });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setAppData({ ...appData, [name]: value });
    };

    const handleSubmit = async (e) => {
        e.preventDefault();
        try {
            await axios.post('/', appData);
            alert('Form submitted successfully!');
            setAppData({
                firstName: '',
                lastName: '',
                email: '',
                phoneNumber: '',
                country: '',
                paymentType: ''
            });
        } catch (error) {
            console.error('Error submitting form: ', error);
            alert('Error submitting form. Please try again.');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="firstName" value={appData.firstName} onChange={handleChange} placeholder="First Name" required /><br />
            <input type="text" name="lastName" value={appData.lastName} onChange={handleChange} placeholder="Last Name" required /><br />
            <input type="email" name="email" value={appData.email} onChange={handleChange} placeholder="Email" required /><br />
            <input type="tel" name="phoneNumber" value={appData.phoneNumber} onChange={handleChange} placeholder="Phone Number" required /><br />
            <input type="text" name="country" value={appData.country} onChange={handleChange} placeholder="Country" required /><br />
            <select name="paymentType" value={appData.paymentType} onChange={handleChange} required>
                <option value="">Select Payment Type</option>
                <option value="Credit Card">Credit Card</option>
                <option value="PayPal">PayPal</option>
                <option value="Bank Transfer">Bank Transfer</option>
            </select><br />
            <button type="submit">Submit</button>
        </form>
    );
};

export default App;