A drop-in React component for submitting forms with a Django CSRF middleware token.
npm install --save django-react-csrftoken
import React from 'react';
import DjangoCSRFToken from 'django-react-csrftoken'
class MyLoginForm extends React.Component {
render(){
return (
<div className="container">
<form>
<DjangoCSRFToken/>
// email
// password
// submit button
</form>
</div>
)
}
}Because react renders elements dynamically, Django might not set a CSRF token cookie if you render a form using react. This is described in the Django docs:
If your view is not rendering a template containing the csrf_token template tag, Django might not set the CSRF token cookie. This is common in cases where forms are dynamically added to the page. To address this case, Django provides a view decorator which forces setting of the cookie: ensure_csrf_cookie().
To fix this problem add the decorator mentioned above to your views:
from django.views.decorators.csrf import ensure_csrf_cookie
@ensure_csrf_cookie
def register_view(request):
// ...