0

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;

1 Answer 1

0
`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?

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.