title: How to send data from React template to Flask API?
body: <p>I want to use a sign in template, but I'm not sure how to send data from this template to my Flask API. I read that states are only in components. Is that true? I tried calling the Register function inside render from another file that has a component, but I got an error about invalid hooks.</p>
  
  <p><strong>Flask API</strong></p>
  
  <pre><code>from flask import Blueprint, jsonify
  from flask import request, make_response
  import sqlite3
  from sqlite3 import Error
  import os.path
  import json
  
  main = Blueprint('main', __name__)
  
  BASE_DIR = os.path.dirname(os.path.abspath(__file__))
  db_path = os.path.join(BASE_DIR, "database.db")
  
  def connection():
      try:
          conn = sqlite3.connect(db_path)
      except Error as e:
          print(e)
      return conn
  
  @main.route('/add_review', methods=['POST'])
  def add_review():
      conn = connection()
      cur = conn.cursor()
  
      req = request.get_json()
      busID = req.get('busID')
      userID = req.get('userID')
      review = req.get('review')
      rating = req.get('rating')
  
      sql = "INSERT INTO Review (businessID, userID, review, rating) VALUES (?, ?, ?, ?)"
      data = (busID, userID, review, rating)
      cur.execute(sql, data)
  
      conn.commit()
      cur.close()
  
      return 'Done', 201
  
  @main.route('/reviews')
  def reviews():
      conn = connection()
      cur = conn.cursor()
      name = "Halal Guys"
      cur.execute("SELECT * FROM Review where businessID = (SELECT id FROM Business where name = \'{}\')".format(name))
      reviews = cur.fetchall()
  
      reviews_dict = []
      for review in reviews:
          content = {"id": review[0], "busID": review[1], "userID": review[2],
                      "review": review[3], "rating": review[4]}
          reviews_dict.append(content)
  
      return json.dumps(reviews_dict)
  
  @main.route('/createUser', methods=['POST', 'OPTIONS'])
  def createUser():
      # handle option request
      if request.method == "OPTIONS":
          response = make_response()
          response.headers["Access-Control-Allow-Origin"] = "*"
          response.headers[
              "Access-Control-Allow-Headers"
          ] = "Origin, Accept, Content-Type"
          response.headers["Access-Control-Allow-Methods"] = "POST,OPTIONS"
          response.headers["Access-Control-Allow-Credentials"] = "true"
          return response
  
      if request.method == "POST":
          # do your SQL stuff
          conn = connection()
          cur = conn.cursor()
  
          req = request.get_json()
          first = req.get("FirstName")
          last = req.get("LastName")
          email = req.get("Email")
          pw = req.get("Password")
  
          sql = (
              "INSERT INTO User (first, last, emailAddress, password) VALUES (?, ?, ?, ?)"
          )
          data = (first, last, email, pw)
          cur.execute(sql, data)
  
          conn.commit()
          cur.close()
  
          # make response
          response = make_response("{}")  # return empty JSON response
          response.headers["Access-Control-Allow-Origin"] = "*"
          response.headers[
              "Content-Type"
          ] = "application/json"  # set response type to JSON
          return response
  
      return "", 405
  
  </code></pre>
  
  <p><strong>Sign in template</strong></p>
  
  <pre><code>import React from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  import Typography from '@material-ui/core/Typography';
  import { makeStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  
  function Copyright() {
    return (
      &lt;Typography variant="body2" color="textSecondary" align="center"&gt;
        {'Copyright © '}
        &lt;Link color="inherit" href="https://material-ui.com/"&gt;
          Your Website
        &lt;/Link&gt;{' '}
        {new Date().getFullYear()}
        {'.'}
      &lt;/Typography&gt;
    );
  }
  
  const useStyles = makeStyles(theme =&gt; ({
    paper: {
      marginTop: theme.spacing(8),
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main,
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(3),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  }));
  
  export default function Register() {
    const classes = useStyles();
  
    return (
      &lt;Container component="main" maxWidth="xs"&gt;
        &lt;CssBaseline /&gt;
        &lt;div className={classes.paper}&gt;
          &lt;Avatar className={classes.avatar}&gt;
          &lt;/Avatar&gt;
          &lt;Typography component="h1" variant="h5"&gt;
            Sign up
          &lt;/Typography&gt;
          &lt;form className={classes.form} noValidate&gt;
            &lt;Grid container spacing={2}&gt;
              &lt;Grid item xs={12} sm={6}&gt;
                &lt;TextField
                  autoComplete="fname"
                  name="firstName"
                  variant="outlined"
                  required
                  fullWidth
                  id="firstName"
                  label="First Name"
                  autoFocus
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12} sm={6}&gt;
                &lt;TextField
                  variant="outlined"
                  required
                  fullWidth
                  id="lastName"
                  label="Last Name"
                  name="lastName"
                  autoComplete="lname"
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                &lt;TextField
                  variant="outlined"
                  required
                  fullWidth
                  id="email"
                  label="Email Address"
                  name="email"
                  autoComplete="email"
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                &lt;TextField
                  variant="outlined"
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="current-password"
                /&gt;
              &lt;/Grid&gt;
              &lt;Grid item xs={12}&gt;
                &lt;FormControlLabel
                  control={&lt;Checkbox value="allowExtraEmails" color="primary" /&gt;}
                  label="I want to receive inspiration, marketing promotions and updates via email."
                /&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
            &lt;Button
              type="submit"
              fullWidth
              variant="contained"
              color="primary"
              className={classes.submit}
            &gt;
              Sign Up
            &lt;/Button&gt;
            &lt;Grid container justify="flex-end"&gt;
              &lt;Grid item&gt;
                &lt;Link href="/login" variant="body2"&gt;
                  Already have an account? Sign in
                &lt;/Link&gt;
              &lt;/Grid&gt;
            &lt;/Grid&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;Box mt={5}&gt;
          &lt;Copyright /&gt;
        &lt;/Box&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>