Full Stack Flask, React, and Postgres, pt 2

Create a full stack application using Flask, PostgreSQL, and React. In this video, we'll connect our Flask back end to a new React front end.

[@tracy8522]

I really like this!!! You put it all into one whole set that provide us with the whole picture!
Thank you Chris!

[@hubschmannn]

a lot of thx!!! very usefull content!

[@captainwalter]

Thanks for the great video! flask + react seem like a solid combo

[@mytechnotalent]

Really great job Chris! One issue I found is if you delete all the entries and try to add a new one the events become null and you are not able to add anything new. Its very minor but something to think about in future tutorials so you can properly prevent this behavior but really great job on this!

[@PinoyDiskubreChannel]

been creating and following this method - Flask plus React - Done on your part 1.

[@vijeandran]

HI, Instead of printing all the columns in GET request, How could I get only specific columns from the postgres table?

[@ChrisDeSilva]

I did a quick Google search for "sqlalchemy get single column" and found this: stackoverflow.com/questions/50366530/sqlalchemy-get-only-one-column. Hope it helps!

[@SantoshK-md6wc]

wonderful video. thanks you so much

[@TheNormann33]

Hi, thanks for the great video! I tried to reproduce it, and everything work fine, while Im on localhost. When I try to open react page outside localhost, it opens with errors. It seems like frontend cant reach backend in this case. Could you please give some advise how to fix it?

[@speedbump164]

great job man. thank you

[@ax3lgarcia675]

please help i do the exact same things but i have alert CORS when i try to Add an event with the POST METHOD : .....has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response. i dont know how to resolve it .....

[@talgrinvald]

Great video!!

[@Rayleigh1423]

If I open the react webpage from another PC within network I get this: "Failed to load resource: net::ERR_CONNECTION_REFUSED"
I can't see the items in the database, nor submit new ones.
Edit: I fixed it by changing baseUrl variable

[@ChrisDeSilva]

Awesome that you came back to post the solution. Glad you got it sorted out!

[@zacharymargulies]

At minute 15 I keep getting the error "Uncaught TypeError: Cannot read properties of undefined (reading 'map')" when trying to run the app. I am not sure what I am doing wrong but for some reason map is not working. Any thoughts?

[@ChrisDeSilva]

Is it giving you a line number? It's likely that you're trying to map over something that's undefined. Either a variable typo or data that might be getting fetched that isn't ready yet.
For example, if I do data.map... - and data is being fetched, data can temporarily be undefined.
There are a few ways of addressing these things. You can add a loading state, use optional chaining (data?.map), etc. Just depends why exactly you're getting the error.

[@zacharymargulies]

@@ChrisDeSilva No line number but the rest of the error reads "TypeError: Cannot read properties of undefined (reading 'map')
at App (localhost:3000/main.6a2dabcb05f981dd9f7e.hot-update.js:134:32)
at renderWithHooks (localhost:3000/static/js/bundle.js:21453:22)
at updateFunctionComponent (localhost:3000/static/js/bundle.js:24335:24)
at beginWork (localhost:3000/static/js/bundle.js:26047:20)
at HTMLUnknownElement.callCallback (localhost:3000/static/js/bundle.js:11045:18)
at Object.invokeGuardedCallbackDev (localhost:3000/static/js/bundle.js:11089:20)
at invokeGuardedCallback (localhost:3000/static/js/bundle.js:11146:35)
at beginWork$1 (localhost:3000/static/js/bundle.js:31020:11)
at performUnitOfWork (localhost:3000/static/js/bundle.js:30267:16)
at workLoopSync (localhost:3000/static/js/bundle.js:30190:9)"
Thanks for the reply. Your video is INCREDIBLE, but this error is stumping me.

[@zacharymargulies]

In trying to debug this, I am confused as to why you use do line 49 at minute 15 "eventsList.map(event=> {"
shouldn't "event" here be "events" ?

[@ChrisDeSilva]

You can call that whatever you want. When I use array methods, I typically call it the individual entity. Since we're mapping over eventList, then each individual item is an event.

[@zacharymargulies]

@@ChrisDeSilva Thank you that makes sense. So optional chaining does get rid of the error but sadly that means I can't fetch my data, no?

[@therollingambit5222]

I'm getting this error despite enabling flask_cors: Access to XMLHttpRequest at 'localhost:5000/events' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Any way I can overcome this? I've tried to check for solutions from SO but still cant find a working solution :(

[@ax3lgarcia675]

i got the same problem ... this tuto dosn't work for me..