Django view not sending context data to ReactJS/Axios application - django

Question

It appears I have come across very strange behavior. I am building a ReactJS+Django 3.0 application. Here is the problem...
I have a <form onSubmit={handleSubmit}> that wraps the form on the frontend.
const handleSubmit = (e) => {
e.preventDefault();
axios.post(paths.login, qs.stringify({
email: emailVal,
password: passwordVal
}));
}
This works perfectly fine in sending data to the Django view! But when I try to then pass context variable through the Django view, it just fails completely. Meaning,
def login(request):
data = {}
'''
Handle Logging in
'''
if request.method == 'POST':
login_form = forms.LoginForm(request.POST)
if login_form.is_valid():
user = login_form.authenticate_user()
#login(request, user)
return redirect('home')
else:
data['errorMessage'] = ''
for field, errors in login_form.errors.items():
for error in errors:
data['errorMessage'] += error
print(data)
return render(request, 'index.html', context=data)
Given this, the data dictionary will be empty at first, but even when the print(data) shows that the data dictionary is populated, the context data that is sent to the index.html file is still empty.
WHY MIGHT THIS BE? I've been stuck on this forever.
I can work around this if I just use form submission instead of axios like this: <form method='POST'> However, I need to use axios. SOS

Answer 1

You can also use the Django messages framework for this, which might be a better option (assuming you are re-rendering the page after POST):
from django.contrib import messages
def login(request):
data = {}
'''
Handle Logging in
'''
if request.method == 'POST':
login_form = forms.LoginForm(request.POST)
if login_form.is_valid():
user = login_form.authenticate_user()
#login(request, user)
return redirect('home')
else:
error_message = ''
for field, errors in login_form.errors.items():
for error in errors:
error_message += error
messages.add_message(request, messages.ERROR, error_message)
return render(request, 'index.html')
Then in your template (this is an example using Bootstrap, but you can modify it to fit your needs):
{% if messages %}
{% for message in messages %}
{% if message.tags == 'error' %}
<div class="alert alert-danger alert-with-icon alert-dismissible fade show" role="alert">
{% else %}
<div class="alert alert-{{ message.tags }} alert-with-icon alert-dismissible fade show" role="alert">
{% endif %}
{{ message|safe }}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
{% endfor %}
{% endif %}
If you are sending data back as an AJAX JSON response instead:
from django.http import JsonResponse
def login(request):
data = {}
'''
Handle Logging in
'''
if request.method == 'POST':
login_form = forms.LoginForm(request.POST)
if login_form.is_valid():
user = login_form.authenticate_user()
#login(request, user)
return redirect('home')
else:
error_message = ''
for field, errors in login_form.errors.items():
for error in errors:
error_message += error
data['error_message'] = error_message
return JsonResponse(data)
else:
return render(request, 'index.html')
In your Axios code:
const handleSubmit = (e) => {
e.preventDefault();
axios.post(paths.login, qs.stringify({
email: emailVal,
password: passwordVal
}).then((response) => {
//do something with JSON response
}, (error) => {
//do something with JSON response
});
});