CODEWITHSUNDEEP
javascriptdjangoreactjs
Marc
Marc

Reputation: 3596

How to pass JavaScript variables to React component

I'm somewhat new to React and I'm having some trouble passing some variables from my Django server to my React components. Here's what I have:

The server is Django, and I have a url mydomain.com/testview/ that gets mapped to a views.py function testview:

def testview(request):
    now = datetime.datetime.now()
    return render(request, 'testview.html', {
        'foo': '%s' % str(now),
        'myVar': 'someString'
    })

In other words, running testview will render the template file testview.html and will use the variables foo and myVar.

The file testview.html inherits from base.html which looks like this:

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
  </head>
  <body>
    {% block main %}{% endblock %}
  </body>
</html>

The file test.html basically inserts the needed code into block main:

testview.html:

{% extends "base.html" %}
{% load render_bundle from webpack_loader %}

{% block main %}
<script type="text/javascript">
var foo = {{ foo }};  
var myVar = {{ myVar }};  
</script>
<div id="App"></div>
{% render_bundle 'vendors' %}
{% render_bundle 'App' %}
{% endblock %}

Note that just before the div id="App", I created a couple of javascript variables foo and myVar and set them to the values from Django.

Now to REACT: my file App.jsx looks like this:

import React from "react"
import { render } from "react-dom"

import AppContainer from "./containers/AppContainer"

class App extends React.Component {
  render() {
    return (
      <AppContainer foo={props.foo} myVar={props.myVar}/>
    )
  }
}

render(<App foo={window.foo} myVar={window.myVar}/>, document.getElementById('App'))

In other words, my App.jsx file renders the App component, passing in foo and myVar. Inside class App, I assumed these were props so I pass these to AppContainer using props.foo and props.myVar. My class AppContainer is inside a components folder and looks like this:

import React from "react"

import Headline from "../components/Headline"

export default class AppContainer extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">
            <Headline>Running App! foo is {props.foo}, Here is a string: {props.myVar}</Headline>
          </div>
        </div>
      </div>
    )
  }
}

However, none of this seems to work. I just get a blank page. What am I doing wrong?

Upvotes: 2

Views: 6594

Answers (2)

Marc
Marc

Reputation: 3596

So this is what I needed to do to get it to work. First, I used Giang Le's answer above and in my testview.html file (a Django template file), I put quotes around the variables as they were indeed strings. Next, I changed the render statement in my App.jsx file to be this:

render(<App foo={foo} myVar={myVar}/>, document.getElementById('App'))

This used Bruno Vodola Martins' answer to access foo and myVar as javascript globals. I also had to use this.props.foo instead of props.foo in my App class:

class App extends React.Component {
  render() {
    return (
      <AppContainer foo={this.props.foo} myVar={this.props.myVar}/>
    )
  }
}

And I did the same thing in containers/AppContainer.jsx:

export default class AppContainer extends React.Component {
  render() {
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">
            <Headline>App! foo is {this.props.foo}, Here is a string: {this.props.myVar}</Headline>
          </div>
        </div>
      </div>
    )
  }
}

Bottom line: put quotes around string variables from Django, and use this.props.foo instead of just props.foo.

Upvotes: 1

Giang Le
Giang Le

Reputation: 7089

if foo and myVar is string you should declare 

var foo = "{{ foo }}";  
var myVar = "{{ myVar }}";

Upvotes: 1

Related Questions