How to pass JavaScript variables to React component

Question

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?

Hey, Marc, try removing the window from the variables in the last line of your App.jsx file: render(<App foo={foo} myVar={myVar}/>, document.getElementById('App')). You created them as globals, so they are accessible just by their names. No need for window.. — Brunno Vodola Martins
– Brunno Vodola Martins, Commented Nov 7, 2017 at 4:20
try to alert foo value after this line , var foo = {{ foo }}; — Vivek Doshi
– Vivek Doshi, Commented Nov 7, 2017 at 4:26

Giang Le · Accepted Answer · 2017-11-07 04:21:51Z

1

if foo and myVar is string you should declare

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

answered Nov 7, 2017 at 4:21

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

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

Comments

Marc · Accepted Answer · 2017-11-07 06:06:10Z

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.

Collectives™ on Stack Overflow

How to pass JavaScript variables to React component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related