Concatenate strings and variables in React

avatar

Borislav Hadzhiev

Fri Apr 29 20222 min read

banner

Photo by Ph B

Concatenate strings and variables in React #

Use a template literal to concatenate strings and variables in React, e.g. "<a href={https://example.com/${myPath}}". Template literals are delimited with backticks and allow us to embed variables and expressions using the dollar sign and curly braces ${expression} syntax.

App.js
import './App.css'; export default function App() { const myClass = 'bg-salmon'; const num = 30; const myPath = '/example/123'; const path = 'example'; const id = '123'; const url = `https://example.com/${path}/${id}`; console.log(url); // 👉️ "https://example.com/example/123" return ( <div> <a href={`https://example.com/${myPath}`} target="_blank" rel="noreferrer" > Example </a> <div className={`text-white ${myClass}`}>Apple</div> <br /> <div className={`some-class ${'hi'.length === 2 ? 'bg-yellow' : ''}`}> Banana </div> <h2 style={{ padding: `${num + num}px`, backgroundColor: 'lime', }} > Kiwi </h2> </div> ); }

And here is the CSS for the examples.

App.css
.bg-salmon { background-color: salmon; } .bg-yellow { background-color: yellow; } .text-white { color: white; }

react concatenate string and variable

We used template literals to concatenate strings and variables in React.

Note that the string is enclosed in backticks ``, not in single quotes.

The dollar sign and curly braces syntax allows us to use placeholders that get evaluated.

App.js
<a href={`https://example.com/${myPath}`} target="_blank" rel="noreferrer" > Example </a> <div className={`text-white ${myClass}`}>Apple</div> <br /> <div className={`some-class ${'hi'.length === 2 ? 'bg-yellow' : ''}`}> Banana </div>

The curly braces we wrapped the template literal in mark the beginning of an expression that has to be evaluated.

The code between the opening an closing curly brace is just JavaScript, so any variable or expression we use in our template literals will get evaluated.

You can also use template literals outside of your JSX code.

App.js
const path = 'example'; const id = '123'; const url = `https://example.com/${path}/${id}`; // 👇️ "https://example.com/example/123" console.log(url);

By default, the template literal concatenates the parts into a string.

If you need to conditionally concatenate a string and a variable, use the ternary operator in your template literal.

App.js
const color1 = 'blue'; const color2 = 'red'; const result = `${color1.length > color2.length ? color1 : color2}`; console.log(result); // 👉️ blue

The ternary operator is basically an if/else statement. The part before the question mark gets evaluated and if it returns a truthy value, the operator returns the value before the colon, otherwise it returns the value after the colon.

App.js
<div className={`some-class ${'hi'.length === 2 ? 'bg-yellow' : ''}`}> Banana </div>

The ternary operator in the example checks if the length of the string hi is equal to 2 and if it is, it returns the string bg-yellow, otherwise an empty string is returned.

Use the search field on my Home Page to filter through my more than 1,000 articles.