Strings are one of essential building blocks of web applications in React. We need strings for everything – from styling to custom error messages.

Strings are normally static and have a beginning and an end, marked by single or double quotes. But sometimes we need to make strings (or parts of them) dynamic. That’s what string interpolation is – making strings (or their parts) dynamic.

In this article, we will explore all the different ways to do string interpolation in React.

String interpolation in JSX

JSX is a templating language for React. Every component returns JSX code that looks a lot like HTML, but it’s actually JavaScript.

React is written in JavaScript. Even JSX, which looks like HTML, but is actually JavaScript. This is great because React developers get best of both worlds – readability of HTML and dynamic features of JavaScript.

However, you need to use curly braces {} to use JavaScript expressions in JSX.

There are a number of ways to do string interpolation in React. You can use a simple addition (+) operator to combine static and dynamic parts of the string.  Since the introduction of ES6, you can also use template literals to easily create dynamic strings in React.

Curly braces

React allows you to embed a dynamic value in your JSX. You don’t need template literals or concatenation.

You can embed dynamic values to set values for attributes, props, or for content like <h1> and <p>.

Here’s a simple example:

export default function App() {
  const [name, setName] = useState("Nick");
  return (
    <div className="App">
      <h1>{name}</h1>
    </div>
  );
}

You use the useState() hook to initialize a state variable. Then simply embed this value in your header text.

Concatenation

Often simple concatenation is sometimes enough to create a dynamic string. Let’s look at an example:

export default function App() {
  const [lastName, setLastName] = useState("Smith");
  return (
    <div className="App">
      <h1>{"George " + lastName}</h1>
    </div>
  );
} 

In this example, we concatenate first name (a static string) and a dynamic last name. This way of string interpolation works well when string is short or mostly static.

Note that we leave an empty space in the first string, so there’s a space between first and last names. Sometimes you forget to do this. That’s one of the disadvantages of using concatenation for string interpolation in React.

Concatenation works well when the string is short or mostly static. You can concatenate multiple dynamic values or static and dynamic values.

Template literals to do string interpolation in React

Finally, let’s get to the main attraction.

Template literals are probably the most common way to do string interpolation in React. It’s best to use when your string is long or you have many dynamic values to embed.

Template literals are denoted by backticks instead of normal quotes. We use curly braces {} preceded by the dollar sign $ to embed dynamic values inside the string.

Let’s explore an example where we have multi-line string with many dynamic values. First, let’s use concatenation to do string interpolation in React.

Look at the first paragraph. String interpolation looks messy. We use + operator to ‘stitch’ together different parts of the string. Every dynamic value needs to be separate. This gets difficult when you have long strings and many dynamic values.

We need to manually add spaces between dynamic values. This takes a lot of work. Note that age and salary values are integers, not strings. However, JavaScript automatically concatenates integers to a string.

Now compare that to the second paragraph, where we use template literals.

<p>{`${firstName} ${lastName} is a teacher. He is ${age}
          years old. He works in the school, he's a ${occupation}
          and earns ${salary} per year`}
</p>

This is much easier to understand. We simply write the string and use special syntax ${} to embed dynamic parts of the string. We don’t need to manually leave spaces. This feels more natural.

Use string interpolation outside JSX

React is a JavaScript-based library, and template literals are a JavaScript feature. So you can use template literals to do string interpolation in React. You only need to use special syntax to use it inside JSX.