freeCodeCamp/guide/english/certifications/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals/index.md

title
Create Strings Using Template Literals

Instead of using string concatenation, ES6 offers template literals to create strings. In this challenge, you have to use template literals to create an array of text warnings.

Remember to use Read-Search-Ask if you get stuck. Try to pair program and write your own code.

Problem Explanation:

It's required to use template literals to return a list as every element in the array as the element will be wrapped in a <li></li> tag.

Hint: 1

• Use map() function to apply the template literals on all of the arr elements

try to solve the problem now

Hint: 2

• Inside the map() use an arrow function which has element as a parameter and returns <li></li> that has the text-warning class and containing the element inside it

try to solve the problem now

Spoiler Alert!

Solution ahead!

const resultDisplayArray = arr.map(item => `<li class="text-warning">${item}</li>`);

No map() solution

Despite it's a less flexible solution, if you know the number of elements in advance, you can enumerate them as in

const resultDisplayArray = [`<li class="text-warning">${arr[0]}</li>`, `<li class="text-warning">${arr[1]}</li>` ,`<li class="text-warning">${arr[2]}</li>`];