Concatenating variables and strings in React

Concatenating Variables and Strings in React

When working with React, you may find yourself needing to concatenate variables and strings. There are a few ways to accomplish this.

Using Template Literals

One way to concatenate variables and strings in React is to use template literals. Template literals allow you to embed expressions inside of a string literal. To use template literals in your React code, wrap your string in backticks (`) and use the ${} syntax to insert variables or expressions.

const name = 'Raju';
const greeting = `Hello, ${name}!`;

return (
  <div>
    <p>{greeting}</p>
  </div>
);
  

Using the + Operator

Another way to concatenate variables and strings in React is to use the + operator. Simply add the variables or expressions together within the curly braces.

const firstName = 'Raju';
const lastName = 'Singh';

return (
  <div>
    <p>My name is {firstName + ' ' + lastName}.</p>
  </div>
);
  

Using Array Join

You can also use the array join method to concatenate variables and strings. First, create an array containing the variables or expressions you want to concatenate. Then use the join method to combine them into a single string.

const hobbies = ['coding', 'reading', 'traveling'];

return (
  <div>
    <p>My hobbies are: {hobbies.join(', ')}</p>
  </div>
);