How to Include React Variable in a String

In React, put a JavaScript expression inside JSX braces to combine a changing value with text. For example, className={type + "Box"} uses string concatenation, while className={`${type}Box`} uses a template literal. React is a JavaScript library, and JSX lets you write these expressions in markup-like syntax.

Include React Variable in a String Using String Concatenation

In this example, type is the string "large", so type + "Box" concatenates the two values and produces "largeBox". When both operands are numbers, + adds them. In a React component, use the expression as an attribute value inside JSX braces. If type changes, React receives the newly combined value on the next render. The following runnable JavaScript example isolates that string operation; it does not render React or JSX.

Run this example:

const type = "large";
const className = type + "Box";
console.log(className);

largeBox

You can join several parts with +, including a space as its own string. For example, firstWord + " " + secondWord puts one space between the two values. Without that explicit space, the words run together. In JSX, write the full expression inside braces, such as <h1>{firstWord + " " + secondWord}</h1>. The braces mark the JavaScript expression; they are not part of the resulting text.

For a small number of parts, concatenation is direct. With several values, punctuation, or spaces, the repeated + operators can make the intended sentence harder to scan. A template literal is another way to build the same string.

Include React Variable in a String Using Template Literals

A template literal uses backticks and ${...} to insert an expression into a string. In JSX, wrap the template literal in the attribute’s expression braces: className={`${type}Box`}. With type set to "large", the JavaScript expression produces the same largeBox value as concatenation. This notation is useful when a string combines several values or needs spaces, because the surrounding text stays in one readable template. Literal characters between placeholders are copied into the result, so write a space directly between ${firstName} and ${lastName} when the displayed names should be separated. You can also include punctuation or labels in the same way, such as a comma, colon, or unit suffix. The template expression still evaluates to one JavaScript string; it does not add JSX elements or change the values being interpolated. In JSX text, place that expression between braces, as in the heading example. For an attribute such as className, place the template literal inside the attribute braces instead. React then receives the resulting string as the text or attribute value when it renders the component. If a result has missing spacing, inspect the literal characters around each placeholder before changing the JavaScript values.

For example, with const firstName = "Ada" and const lastName = "Lovelace", JSX can render a heading with Hello, ${firstName} ${lastName}! as the template literal expression: <h1>{`Hello, ${firstName} ${lastName}!`}</h1>. Keep the JSX braces around the JavaScript expression and the backticks around the template literal. Choose concatenation for short joins or a template literal when interpolation makes a longer string easier to read; both produce ordinary JavaScript strings for React to use.