Jim's
Tutorials

So I figured out that last issue, I needed to set state for each input for it to take information properly :

lass Form1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        name: '',
        email: '',
        country: '',
        state: '',
        city: '',
        street: '',
        zip: ''

    };

I haden't done that before. I also needed to set a "handlesubmit" even listener for each field.

 handleSubmit(event) {
    alert('A name was submitted: ' + this.state.name);
    event.preventDefault();
  }

..I kept this limited to one (name) and kept it at an alert for now but eventually going to need to change that. I made this in the Form1.js file.

So additionally, I made a "home" component which will be the homepage. It's going to render Form1. I added a "componentDidMount" function to it that fetches the information from localhost 5000(flask/peewee) and throws it up to localhost 3000(react).

componentDidMount() {
    fetch('http://localhost:5000/api/Home', {
      credentials: 'same-origin',
      method: 'GET',
      headers: { 'Content-Type':'application/json'}
    })
      .then(response => {
        if (response.ok) {
          return response;
        } else {
          let errorMessage = `${response.status} (${response.statusText})`,
          error = new Error(errorMessage);
          throw(error);
        }
      })
      .then(response => response.json())
      .then(body => {console.log(body)
        this.setState({results: body})
      })
      .catch(error => console.error(`Error in fetch: ${error.message}`));
  }

You can see it takes json being sent from the flask_app.py server. Which means, I had to make a function that turned the information retreived from the database, into json.

@app.route('/api/Home', methods = ['GET'])
@cross_origin()
def result():
    posts=Post.select().order_by(Post.date.desc())
    array = []
    for post in posts:
        array.append({"name": post.name, "email": post.title, "country": post.country, "state": post.state, "city": post.city, "zip": post.zip})
    return jsonify(array)

something little broke here and it's not working anymore but thats generally what I needed to do. I added the cross-origin stuff becasue I was hitting a "CORS" error, as the flask server was trying to send data to the react server.

CORS error resource: http://flask-cors.readthedocs.io/en/latest/ I read this just to learn how to import my fetch call into another component: https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2 Was trying to get the information spit out by the routes to be in key:value pairs, so it could be jsonified: https://stackoverflow.com/questions/1024847/add-new-keys-to-a-dictionary