Strings using template literals (freecodecamp notes)

#javascript #programming #react

The ES6 Template literals is a new feauture allowing you to create multi-line strings and to use string interpolation features to create strings.

Use template literal syntax with backticks to create an array of list element (li) strings. Each list element's text should be one of the array elements from the failure property on the result object and have a class attribute with the value text-warning. The makeList function should return the array of list item strings.

Use an iterator method (any kind of loop) to get the desired output (shown below).

[
  '<li class="text-warning">no-var</li>',
  '<li class="text-warning">var-on-top</li>',
  '<li class="text-warning">linebreak</li>'
]

As we are asked to use an iterator we will be using the map function, here's a good article for you to check the usage of map in processing arrays https://www.digitalocean.com/community/tutorials/4-uses-of-javascripts-arraymap-you-should-know

With that the exercise we are given is

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {

  const failureItems //


  return failureItems;
}

const failuresList = makeList(result.failure);

And the answer with a map function in use

const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["no-extra-semi", "no-dup-keys"]
};
function makeList(arr) {
  // Only change code below this line
  const failureItems = arr.map(e=>`<li class="text-warning">${e}</li>`)

  // Only change code above this line

  return failureItems;
}

const failuresList = makeList(result.failure);