CODEWITHSUNDEEP
javascriptdjangoreactjswebpack
Sidharth Samant
Sidharth Samant

Reputation: 786

How to pass Django server variable into React jsx?

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?

Upvotes: 2

Views: 1677

Answers (1)

Eagllus
Eagllus

Reputation: 447

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>

Upvotes: 3

Related Questions