Trying to send form data from React.js form to Flask API, yet it doesn't allow to submit to MongoDB

Question

I am trying to make a simple create-User form in order to understand the functions of the API using react.js, python(Flask) and mongodb. However, I keep getting error that none of the input are getting sent to the Flask backend. Any way I can resolve the issue?

This is the identity.py where the post get's handle using Flask_Restful

class NewUser(Resource):
def post(self):
    
    name = request.form.get("name")
    email = request.form.get("email")
    password = request.form.get("password")
    user = User(name=name, email=email, password=password)
    if not name:
        return {'Error': "Name Not Included"}, 403
    if not email:
        return {'Error': "Email Not Included"}, 404
    if not password:
        return {'Error': "Password Not Included"}, 405
    user.hash_password()
    user.save()
    id = user.id
    return {'id': str(id)}, 200

Over Here is the app.js from React_app being connected with proxy. Proxy works because it is able to send the title from the backend without any error.

    import React, {Component} from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      email: '',
      password: '',
      titleData: [],
      userData: []
    };
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({
      name: event.target.value,
      email: event.target.value,
      password: event.target.value
    })
  }

  ///Find a way to submit POST form to python_flask
  async handleSubmit(event) {
    event.preventDefault()
    console.log('Submit')
    await fetch('/user/join', {
      method: 'POST'
    })
      .then(res => res.json())
      .then(json => {
        this.setState({
          userData: json
        })
      })
      .catch(() => {
        console.log("Error in Data")
      })
  }

  async getData() {
    await fetch('/get')
      .then(response => response.json())
      .then(json => {
        this.setState({
          titleData: json
        })
      })
  }

  async componentDidMount() {
    this.getData()
  }

  render() {
    return (
      <div className="App">
        <header>
          <h1>{this.state.titleData.title}</h1>
        </header>
        <div>
          <p>heeheehe</p>
          <form onSubmit={this.handleSubmit}>
            <h3>New User? Sign in here!</h3>
            <div>
              <input 
                type="text"
                name="name"
                placeholder="Name"
                value={this.props.value}
                onChange={this.props.handleChange}
              />
            </div>
            <div>
              <input 
                name="email"
                placeholder="Email"
                value={this.props.value}
                onChange={this.props.handleChange}
              />
            </div>
            <div>
              <input
                name="password"
                placeholder="Password"
                value={this.props.value}
                onChange={this.props.handleChange}
              />
            </div>
            <button>Press Me</button>
          </form>
        </div>
      </div>
    )
  }
}

export default App;

Answer 1

`await fetch('/user/join', {
  method: 'POST'
})`

You are only making a post request and not sending anything to it. That's why nothing is being received on the other end.

Refer to this post to know how to send a fetch post request in react. How to post object using fetch with form-data in React?