Unable to fetch data from a react file to mysql

I am trying to create a form in react that uploads the image to s3 and the form when filled and confirmed is posted to MySQL. Am having issues posting the form data to MySQL
The react code for the details of the form is below and the code for the confirmation of submission is right after. I try to process the form in the confirmation of submission page to send to backend api so as post it from there to MySQL. Please kindly advise/show me where am wrong with the form process and what I should be doing

Details of the form

import React, { Component } from 'react';

export class Form extends Component {

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  }

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  }

  render() {
    const { values, handleChange } = this.props;
    return (
      <FuiPror>
        <React.Fragment>
          <div> "Enter Form Details" </div>
          <TextField
            hintText="Enter Your Occupation"
            floatingLabelText="Occupation"
            onChange={handleChange('occupation')}
            defaultValue={values.occupation}
          />
          <br />
          <TextField
            hintText="Enter Your Phone"
            floatingLabelText="phone"
            onChange={handleChange('phone')}
            defaultValue={values.phone}
          />
          <br />
          <TextField
            hintText="date"
            floatingLabelText="date"
            onChange={handleChange('date')}
            defaultValue={values.date}
          />
          <br />
          <TextField
            hintText="Notes for Calling (multiLine)"
            floatingLabelText="comments"
            onChange={handleChange('comments')}
            multiLine={true}
            defaultValue={values.comments}
          />
          <br />
          <RaisedButton
            label="Continue"
            primary={true}
            style={styles.button}
            onClick={this.continue}

          />

          <RaisedButton
            label="Back"
            primary={false}
            style={styles.button}
            onClick={this.back}

          />
        </React.Fragment>
      </FuiPror>
    )
  }
}

const styles = {
  button: {
    margin: 15
  }
}
export default Form


confirmation of submission


import React, { Component } from 'react';



export class cosubmit extends Component {

  continue = e => {
    e.preventDefault();
    // PROCESS FORM  // This is where I send my data to API, BAckend, node etc

    const texData = new FormData(this.props.nextStep());

    fetch('app.js', {
      method: 'post',
      body: texData
    }).then(function (response) {
      return response.text();

    }).then(function (text) {
      console.log(text);
    }).catch(function (error) {
      console.error(error);
    });



    this.props.nextStep();
  }

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  }

  render() {

    const { values: { firstName, lastName, email, occupation, phone, date, comments } } = this.props;
    //const { values, handleChange } = this.props;
    return (

        <React.Fragment>

          <div>"Confirmation of Submission" </div>
          <List>
            <ListItem
              primaryText="First Name"
              secondaryText={firstName}
            />
            <ListItem
              primaryText="Last Name"
              secondaryText={lastName}
            />
            <ListItem
              primaryText="Email"
              secondaryText={email}
            />
            <ListItem
              primaryText="Occupation"
              secondaryText={occupation}
            />
            <ListItem
              primaryText="Phone"
              secondaryText={phone}
            />
            <ListItem
              primaryText="Date"
              secondaryText={date}
            />
            <ListItem
              primaryText="Comments"
              multiLine={true}
              secondaryText={comments}
            />
          </List>
          <br />
          <RaisedButton
            label="Confirm & Continue"
            primary={true}
            style={styles.button}
            onClick={this.continue}

          />
          <RaisedButton
            label="Back"
            primary={false}
            style={styles.button}
            onClick={this.back}

          />
        </React.Fragment>

    )
  }
}

const styles = {
  button: {
    margin: 20
  }
}
export default cosubmit

What errors are you getting in the client and/or the backend?

Below is the error am getting in the client

Confirm.js:17 POST http://localhost:3000/texData 404 (Not Found)
Confirm.continue @ Confirm.js:17
Confirm.js:24 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /texData</pre>
</body>
</html>

Do you have an endpoint app.js on the backend api? What does your routing code look like on the backend?

Do you have your project on GitHub? It would help to see the all the code (front-end and back-end) to see how you are trying to put everything together.

My backend end ‘app.js’ is below. Wasn’t able to fork you for what some weird reasons github is giving. The project repo is https://github.com/holarmyde/doctmgt.


const express = require('express');
const app = express();
const config = require('./config')
const ImageController = require('./client/src/push/imageController');
const mysql = require('mysql');



const db = mysql.createConnection({
  host: 'localhost'',
  user: 'root',
  password: '',
  database: 'd****'
});


// Connect
db.connect((err) => {
  if (err) {
    throw err;

  }

  console.log('Database Connected')
});



app.post('/updated****/:email', (req, res) => {
  let newFirstname = 'Updated firstname'
  let sql = `UPDATE dontest SET firstname = '${newFirstname}' WHERE email = ${req.params.email}`;
  let query = db.query(sql, (err, result) => {
    if (err) throw err;
    console.log(result);
    res.send('dontest1 Updated...')
  });
})



app.post('/api/uploadImage', ImageController.uploadImageToS3);

Hey @ RandellDawson . Were you able to make any head-ways in this issue? Please let me know your findings. Thanks