top of page
Logo der Online Agentur mdwp

Template Literals

Template Literals in React Js are a way to output variables inside a string. They are a feature of ES6 JavaScript, rather than being specifically related to React Js but they can be incredibly useful when displaying data in React.

Template literals simplify the process of manipulating and using strings/functions/variables within strings. They are denoted by backticks (` `) instead of regular quotes, which enable easy embedding expressions within the string, referenced by including the ${ } notation.

Below is a simple example of a template literal being used in a React component:

```JS
class ExampleComponent extends React.Component {
render() {
let name = 'Danny';
let age = '22';

return (
<div>
{/* String literals */}
{`Hello, my name is ${name}, and I am ${age} years old.`}
</div>
);
}
}
```
In the above code, `name` and `age` are variables that are inserted into the string using a template literal. The variables are wrapped in ${ } inside of the backticks. This can be a very useful way to insert variables into a string in React components.

bottom of page