A simple use case for variables

Lets start with the code from our last post:

var Hello = React.createClass({
    render: function() {
        return <div>Hello, haters!</div>;
    }
});

Lets say that I want to replace the word “haters” with a Javascript variable instead. If you had to guess, how do you think one would go about doing this? If you’re stumped, don’t worry - it’s likely not immediately obvious to you, as JSX is a superset of Javascript and thus its conventions are a bit unfamiliar.

How to render variables in JSX

Lets distill our question down into something we could search Google with. If you think about it, what we’re really trying to find out here is how we can tell JSX to render any Javascript expression (essentially anything that produces a value when interpreted). A quick search for “JSX render javascript expression” yields us the answer!

To render a Javascript expression in JSX, all you need to do is surround the expression in curly braces, like so:

var Hello = React.createClass({
    render: function() {
        return <div>Hello, { targetOfGreeting }!</div>;
    }
});

Right now this component will render “Hello, !” because targetOfGreeting currently contains no value. Lets set it to “world” instead — but where should we define the variable targetOfGreeting? React's render method is just a regular old method, which means that it can contain variables, functions, and any other code required to make your view render. Considering our circumstances, this seems like an apt place to define targetOfGreeting:

var Hello = React.createClass({
    render: function() {
        var targetOfGreeting = "world";
        return <div>Hello, { targetOfGreeting }!</div>;
    }
});

Our component now displays “Hello, world!” — you can check out the working code here!

Another common use for variables

The last thing worth mentioning is how you can use Javascript expressions to populate HTML attributes. A great example of this is programmatically setting CSS classes, which can be done like so:

var Hello = React.createClass({
    render: function() {
        var myStyleClass = "exampleCss";
        var targetOfGreeting = "world";
        return (
            <div className={ myStyleClass }>
                Hello, { targetOfGreeting }!
            </div>
        );
    }
});

You can check out the working code here!

There are two things worth noting about the code above. The first is that we wrapped our return statement in parentheses because it spans multiple lines, which is considered best practice. The second thing worth noting is that we’re using the attribute className instead of class. The reason for this is that “class” is a reserved word in Javascript, and the folks who made JSX have some very good reasons behind their decision to deprecate the use of “class”. It may take a little getting used to, but when you write React components you will always use className instead of class.