How to pass Django server variable into React jsx?

Question

I have a Django view that passes a model queryset and a string variable (order)

class RestaurantListView(generic.ListView):
    model = Restaurant
    context_object_name = 'restaurants'
    template_name = 'routeyourfood/restodetails.html'
    paginate_by = 4

    @method_decorator(require_GET)
    def dispatch(self, request, *args, **kwargs):
        return super(RestaurantListView, self).dispatch(request, *args, **kwargs)

    def get_queryset(self, **kwargs):
        self.pids = self.request.session['place_ids']
        self.order = self.kwargs['order']

        self.ordering_dict = {
            'rating-asc': 'rating',
            'rating-desc': '-rating',
            'name-asc': 'name',
            'name-desc': '-name',
            'distance-asc': 'distance_from_route',
            'distance-desc': '-distance_from_route'
        }

        if self.order == 'default':
            return Restaurant.objects.filter(place_id__in=self.pids)
        return Restaurant.objects.filter(place_id__in=self.pids).order_by(self.ordering_dict[self.order])

    def get_context_data(self, **kwargs):
        context = super(RestaurantListView, self).get_context_data(**kwargs)
        context['order'] = self.kwargs['order']
        return context

I am trying to implement ReactJS into my front end.

Currently, my template, restodetails.html has only a few CSS tags and no JS tag.

I construct the entire page using just the template variables I have passed.

But I can't see how I can integrate React into this.

One way I got was to put React into a <script> tag in the head section, like here.

But I'm keeping my React code in separate JSX files in the Django static folder, which I'm bundling using Webpack.

I also don't like the idea of putting JavaScript into the template.

Is there a way to pass those context variables into the JSX files?

Eagllus · Accepted Answer · 2018-01-03 14:48:50Z

3

From what I know there is no direct way of sending the context variables into the JSX files.

What you could do is create an API that makes the information available and let React do the Ajax call in order to get the information.

You could also decided to only create a variable in the <script> part like below.

 <script>
 var context_data = <<context data here>>;
 </script>

answered Jan 3, 2018 at 14:48

Eagllus

4473 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sidharth Samant Over a year ago

Thanks. I was also thinking of creating an API view that responds to AJAX calls from React, but I didn't want to create a whole new view. Thought of integrating the existing RestaurantListView with React front-end. But anyway, I think I'd probably just keep the code as it is. React doesn't seem very useful here, to me.

Eagllus Over a year ago

I believe you should always try to avoid using an extra library. If React would give you extra options that you are really wanting to use on your website, I recommend using it. If a simple ListView can achieve the same result go for that.

Sidharth Samant Over a year ago

ListView was sufficient, but I am learning ReactJS now, and I wanted to use it as much as I could, in as many different ways as I can.

Collectives™ on Stack Overflow

How to pass Django server variable into React jsx?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related