Django and React Tutorial // 2 - Handing Post Requests

[@mattfreire]

*** Please note this video is over two years old. I've left it up for those of you who might get value from it but be aware that packages update and things change. It could not work for you and that might just be because the tech has changed by now. We have a recently created (2020) course on our website that covers how to build web applications with Django and React. It is a paid course but the value you get is much more than this old tutorial. If you're interested check out learn.justdjango.com Thanks for your understanding! ***

[@mundiakaluson]

I'm watching this is 2021. You've shown the real essence and meaning of full stack. Through referencing the web and putting everything together, you just make Python and React look like a family.

[@ioan-dumitruhadarean1483]

Really straight forward tutorial, and you are explaining really well the concepts, amazing stuff, like all your videos. I have seen Udemy tutors who are clueless about the things they teach. How can people even dislike such good videos? This is quality stuff for free.

[@RahulGupta99]

Finished the second video of the series. Thank you for posting it. Quite informative.

[@D5LR1L]

Thank you so much. Please make more videos like this. I really like the way you teach!

[@kaanberke1749]

Edit: Also i wanted to add this about 'this.props' . If you have a problem with it you should use props.btnText insted of this.props.btnText const CustomForm = (props: Form) => {} --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- For who has a problem on around 26:00 follow the steps: 1-) you should use onFinish instead of onSubmit 2-) Function should be like this: const handleFormSubmit = values => { console.log(values.title) console.log(values.content) }; 3-) put the name="content" and name="title" into Form.Item not Input !! Like following.. Stay safe&happy!

[@Chinmay_395]

@Kaan Berke I am a begineer in react Did he refresh the page at 39:50 physically or it happened when he clicked on update; because when I tried it, it sends the data to the server but doesn't update [I mean reload] the page. I suspect he refreshes the page physically since, he is using "ComponentDidMount" method the page won't update. Correct?

[@aliabdullahcp]

that was really helpful, thanks

[@metealpkzlcay4418]

for people who facing the submit issue, change your code in Form.js file like this; import React from 'react'; import { Form, Input, Button } from 'antd'; import axios from 'axios'; class CustomForm extends React.Component { handleSubmit = (values, requestType, articleID) => { const title = values.title; const content = values.comment; const formData = new FormData(); formData.append('title', title); formData.append('content', content); const data = { title: title, content: content } switch (requestType) { case 'POST': return axios({ method: 'post', url: '127.0.0.1:8000/api/', data: formData }) .then(response => console.log(response)) .catch((error) => console.log(error)) case 'PUT': const put_url = '127.0.0.1:8000/api/' + articleID + "/" return axios({ method: 'put', url: put_url, data: formData }) .then(response => console.log(response)) .catch(error => console.log(error)) } } render() { return ( this.handleSubmit( values, this.props.requestType, this.props.articleID, )}> {this.props.btnText} ); }; } export default CustomForm

[@mokraneachache5809]

just use normal form instead of Form provided by ant

[@ericslusarz]

This is so good! Definitely going to watch the rest, thank you!

[@adrianhelerea420]

Great tutorial! The sound of your keyboard it is very nice, what are you using?

[@deadfool6105]

Man.. You are just awesome.. 😄😄😄😄

[@mattfreire]

Thanks!

[@markkthemk]

At 31:45 wouldn't it be better to base the put and post on whether or not the article ID is given?

[@aBradAbroad]

Thanks again. Very easy to follow. Looking forward to the next one.

[@silvaXX-st9nh]

Another home run, Thanks for being awesome.

[@Paul-qn7qv]

At 33:51, why wouldn't you store `articleID` inside `componentDidMount`? This way you won't have to access `this.props.match.params.articleID` twice.

[@Fernandocontreras117]

Bro, you are a crack!!!, thanks a lot for all your great videos

[@hozayfaelrifai8841]

and thanks for recording

[@ChaminNalinda]

While making post/put request from React, I got "An established connection was aboarted" error in my Django Backend. how ever, in terms of functionality it's working, is there a reason why this happens. Thanks

[@mdellertson]

Yes, it's because stackoverflow.com ;-P

[@wah1dx]

Hey if you found the solution then pls share it here, I'm stuck here for 2 days now

[@wah1dx]

@@mdellertson Can you be more specific bro.

[@santiagotorres6929]

@@wah1dx It's a joke dude...

[@wah1dx]

Bro after removing event.preventDefault(); I'm getting network error, The page refreshes but the api call is not working. Thanks

[@mubashshiralibaig6104]

put is not updating the article. I did everything as mentioned in the vid but on clicking it just reloads the page and show the same title and content

[@hellokitty13577]

put a / after ${articleID}

[@kevinxin1545]

I just wanna know what keyboard you are using XD

[@Paul-qn7qv]

At 34:43, it's `console.error` not `console.err`

[@mathiasbramstorp281]

i cant access the /id cors is blocking the part but i can see the whole api on the homepage but only when i click on one of the object i get this message i worked before chaning around setup also when i click the api link i get the object. Access to XMLHttpRequest at '127.0.0.1:8000/api/1' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[@husseinsaad7969]

Perfect, keep going!

[@mbaye501]

Just wondering how would l deploy this on a platform like Heroku ? successfully deploy pure Django project before but not sure about combining react + Django

[@mattfreire]

Looking at posting a video on this sometime. At the moment I would say you host the Django rest framework on heroku and use firebase for your frontend

[@BRJWON]

removing preventDefault is still not helping refresh db call. Can someone help with this.

[@limyeewee3518]

Hi, same problem here. Did you manage to fix it?

[@xXshozzyXx]

@@limyeewee3518 add window.location.reload() at the end of each case

[@sahiltrivedi69]

Great work thank you so much this is priceless :D

[@Chinmay_395]

why does it give an error if you put the createView URL path after detailView. Is there a reason why this happens?

[@muzafferckay2609]

Hi, why does Django return errors if we put path('create/', ArticleCreateView.as_view()). bottom path('/', ArticleDetailView.as_view()) in api urls. it return Article detail when scan 127.0.0.1:8000/api/create/ on browser.

[@NavjotSingh-so8jb]

my form.js page is not responding when i click submit ??? what to do plzz help?

[@anamariaafanasov2100]

I got stuck with the same problem. Have you found any solution?

[@abednegowambua7990]

@@anamariaafanasov2100 you can use onSubmitCapture instead of onSubmit

[@harekowicz]

Great tut! Do you have any idea why handleFormSubmit event just refreshes the page without executing the rest event code? Putting event.preventDefault() fixes the issue but the page is not being refreshed. Thanks a lot in advance! Cheers!

[@mattfreire]

+harekowicz in most react applications the aim is not to refresh the page because you are normally storing data in the state of your application that would be lost if you refreshed. Instead you’d show a spinner to tell the user that some action is taking place

[@hamyazilim]

Awesome tutorial.

[@castilloalexander739]

I have a query, I have done everything as indicated in the video, but when I want to go to the detail view from the frontend application, the following message appears in the browser console - the CORS header is missing: 'Access-Control -Allow-Origin ' ... by the way, I thank you very much for the series of videos, excellent work!

[@mattfreire]

You don't have corsheaders installed. corsheaders lets you specify urls that are allowed to interact with your server. You can install it yourself or check the github repository (in the description) to see how it was used

[@castilloalexander739]

In fact, I have it installed and configured as shown in the first video of the series. in the doubt of whether I had done the procedures well, I took the time to do a new project and the results are the same

[@castilloalexander739]

I will continue searching for a solution, if I find it I will share it with you.

[@manukyanq]

l got the same trouble .If everything is ok with corsheaders look your url.py file, maybe you has missed "/" in your url patterns or in axios.get method

[@TheArtsyPig]

Did either of you find a solution?

[@sahileliyev2600]

You are perfect, keep it up, it is enjoy to learn from you)

[@alihusham1560]

you are awesome and django is awesome super thank you

[@lukavicic4676]

PUT method updates article but also creates a new one with same title and content. Anyone has this problem?

[@Zzzzzzzzzzzzzzzzzzzzr]

Your Good! If your not in america men Bet alot of companys would want to hire you quick

[@jmarqsmachariah5720]

Am stuck, why are my PUT and Post requests not working. Get is working ok. Anyway your explanation is superb

[@doyourealise]

You're accessing the development server over HTTPS, but it only supports HTTP. how to solve???

[@paulluu3682]

Shouldn't we have a "break" in each case of switch statement?

[@ilies112]

in that case he did put return which allows us to break automatically

[@mbaye501]

great vid man

[@abhijeetpal2098]

Can anyone please tell me can I use any react package? Because it is independent of backend?

[@vladventura1928]

I'm pretty positive you can

[@ichbinderkonig4049]

Great job, thanks a lot

[@mukeshchugwani2274]

Great Video!

[@alihusham1560]

I got 5000 error with put request any help?

[@oyejohnson]

how do i go about auth with django and react, please help its urgent

[@irayyamathad6838]

Best tutorial

[@zhmen007]

Hi, onSubmit does not work for ant 4.*, how to fix it? Thanks.

[@jacksonkupris994]

const title = document.getElementById('title').value; const content = document.getElementById('content').value; also use onFinish instead of onSubmit.

[@chrislarson8128]

@@jacksonkupris994 To add on to this for others who might need help with ant 4: this.handleFormSubmit(values, this.props.requestType, this.props.articleID )}> {this.props.btnText}

[@maurienyt]

@@chrislarson8128 Hey guys, did you had some Error: Request failed with status code 403 ?

[@arivannadih4230]

the page isn't reloading aftere removing the preventDefault()? Can anyone help me?

[@jamesd1950]

window.location.reload(false) I think this will work. put this in .then(res=>{console.log(res);window.location.reload(false);})

[@santiagotorres6929]

2:1 Access to XMLHttpRequest at '127.0.0.1:8000/api/2' from origin 'localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Any idea about how to fix this problem, I've been looking up on all sites and haven't found anything yet...

[@josephmwangi1951]

Thank you...so so much.

[@jgartsu12]

very helpful!

[@БорисБ-е7т]

Thanks a lot!

[@Temea-pw5bv]

you are a great man you better than messi 😃 please move up and still post videos in your chanell

[@darren1107]

I'm really stuck on this onSubmit not working.. I think I'm going to have to move on to another tutorial for now

[@darren1107]

@@asifcoer you need to use onFinish

[@siddharthramawat3713]

@@darren1107 I tried replacing onSubmit with onFinish it didn't work

[@santiagotorres6929]

onSubmitCapture, try this one, and lemme know if something goes wrong...

[@KevinKamauk]

Doing this in 2019 with React version 16.11, i'm getting 'Warning: componentWillReceiveProps has been ....' I understand it has to do with Lifecycle methods being deprecated, this also impacts some of the code from antd, is there anyone who has come across this issue?

[@simonjohn8374]

Kwani unapata error bado au ushasolve

[@KevinKamauk]

@@simonjohn8374 resolved. I realized I'm not affected since I'm only using componentDidMount() instead of componentWillMount (). Only then would I have needed to rename the components.

[@simonjohn8374]

Okay that is better

[@spaceman1]

Access to XMLHttpRequest at 'localhost:8000/api/1' from origin 'localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

[@mohammedsalman3397]

where is the 3rd tutorial? please make more

[@mamatkasymmamatkulov2530]

Cool

[@Thesrik23]

How many more to come in this series??

[@mattfreire]

Not to sure at the moment. Could be doing one or two more

[@husseinsaad7969]

could you make a video on REST framework JWT Auth? please. @justDjango

[@anonuser1366]

good video)))

[@vjp2866]

Is that mac keyboard producing that tap sound?

[@juanoleas1287]

I'm having issues with not being able to submit a PUT or a POST request using the frontend form. I think the issue for mine is with the switch (requestType) statement. Does anyone have a solution and have their code be able to "create" or "update" the articles through the frontend? This is what my current Custom Form looks like: class CustomForm extends React.Component { handleForm = (values, requestType, articleID) => { const title = document.getElementById('title').value; const content = document.getElementById('content').value; console.log(values, requestType, articleID); switch (this.props.requestType) { case 'post': axios.post(API_URL, { title: title, content: content }) .then(res => console.log(res)) .catch(error => console.log(error)); break; case 'put': // return axios.put(API_URL + articleID, { axios.put(`localhost:8000/api/${articleID}/`, { title: title, content: content }) .then(res => { console.log(res); window.location.reload(); }) .catch(error => console.log(error)); break; } } render() { return ( this.handleForm( values, this.props.requestType, this.props.articleID )}> {this.props.btnText} ); }; }

[@escrituratalks]

@@mrb13676 Does it make any difference writing the request types in lower or upper case? For me it works fine both ways

[@maciejscibor]

kudos

[@cyrilmmojekwu9331]

At this time (May 2020), This video is outdated!!!. Do update it, thanks.

[@wseling]

The page at: github.com/justdjango/DjReact.git does not match up with your video! Maybe it used to but not today. I'm using the original commit from Jul. 30, 2018.

[@mattfreire]

+wseling you need to reset back to the commit at the start of this video

[@milankathiriya3635]

Great videos man.... However I try with image field and facing problem with uploading. It just cant done. I try with: Click to upload To upload image in media folder in src folder. I also well setup MEDIA_ROOT and MEDIA_URL in settings.py However when Itry to upload, console raises with: POST 127.0.0.1:8000/media/ 0 () 127.0.0.1:8000/media/:1 How can I get rid from this??? It will be greatly appriciated if you tell what to do.... Waiting for your acknowledge.

[@migueltenorio9998]

Subtítulos en español please

[@chantzoul]

great video, but i can't stand the sound of your mac lmao