How To Concatenate Strings And Variables In React

It’s very easy to concatenate strings and variables in React. Let me show you how right now. Please read the entire article to understand what I want to convey.

Concatenate strings and variables in React

To concatenate strings and variables, we use template literal, also known as template string. This is a syntax to declare String in JavaScript introduced in ES6. Template literal allows us to use variables, expressions, or functions inside a String without doing String addition. 

Unlike the regular String, in template literal, we use the back-ticks instead of apostrophes or double quotes. Variables, expressions, and functions are placed in ‘${}‘. You can put any variables, expressions, or functions inside ‘${}‘.
The program shows how to use it:

Check out the following example for a better understanding:

In Demo.css

.container{
  text-align: center;
  color: darkslateblue;
}

.caution{
  color: red;
}

.pass{
  color: green;
}

In Demo.js

import './Demo.css';

export default function Demo() {
    const Student = {
      name: 'Jason',
      id: '20187229',
      gender: 'Male',
      mathScore: 8.8,
      englishScore: 9.0,
      literatureScore: 7.0
    }

    function finalGrade (s1,s2,s3) {
      const result = (s1 + s2 + s3)/3
      return result.toFixed(2)
    }

    const infor = `INFORMATION OF ${Student.name} - ID: ${Student.id}, GENDER: ${Student.gender}`
    
    return (
     <div className='container'>
      <h2>{infor}</h2>
      <h3>{`Your final grade is: ${finalGrade(Student.mathScore,Student.englishScore,Student.literatureScore)}`}</h3>
      { finalGrade(Student.mathScore,Student.englishScore,Student.literatureScore) > 6.5 ? <h3 className='pass'>Eligibility to graduate</h3> : <h3 className='caution'>Not eligible to graduate</h3> }
     </div> 
   );
}

Output:

The above example uses an object named ‘Student‘. We get the properties of this object and put them in the ‘${}‘ of a string. As a result, the values ​​are rendered correctly in the HTML template.

The wrapping of curly braces marks the beginning and the end of an expression. In this example, I have used a conditional expression in curly braces. If the student’s overall score is greater than 6.5, then ‘Eligibility to graduate‘ will be rendered. Otherwise, ‘Not eligible to graduate‘ will be rendered.

An important thing to note is that when using template literal, we do not use apostrophes or double quotes but the back-ticks. Using the wrong symbol is a common mistake when working with template literal.

const str1 = "Congratulations!"   //using double quotes 
const str2 = `Congratulations!`  // using back-ticks

console.log(str1) 
console.log(str2)

Output:

Congratulations!
Congratulations!

Of course, the result will be the same. However, these characters are easily confused with each other. Please pay attention when using them to avoid unexpected errors.

Summary

Through the above simple example, I hope you understand how we can concatenate strings and variables in React. Thank you for reading to the end.

Maybe you are interested:

• Get the current URL and Pathname in React
• How to toggle a Boolean state in React
• Update nested properties in a State object in React

Christopher

My name’s Christopher Gonzalez. I graduated from HUST two years ago, and my major is IT. So I’m here to assist you in learning programming languages. If you have any questions about Python, JavaScript, TypeScript, Node.js, React.js, let’s contact me. I will back you up.

Name of the university: HUST
Major: IT
Programming Languages: Python, JavaScript, TypeScript, Node.js, React.js