ES6 - Create Strings using Template Literals

ES6 - Create Strings using Template Literals
0

#1

I am not understanding why its not passing the test cases.
I’m using template strings.

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

  // change code below this line
  const resultDisplayArray = arr.map((item) => {
        return `<li class ="text-warning">${item}</li>`;
    });
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/
const resultDisplayArray = makeList(result.failure);

#2

I think there is an extra space in return statement
<li class ="text-warning">${item}</li> Right after class you have an extra space. Would that help?


#3

Thanks . Didn’t notice that. It surely takes every precision.


#4

No worries. It is hard to notice every little detail. I was staring at your code and thought that it should work. Then I myself went to the challenge and wrote solution which ended up being exactly the same as yours. And was like WTF it is all the same :smiley: Sometimes just re-writing the same thing from the scratch can help.


#5

Hi people!
I don’t know if is correct write here or open other post.

Why my code is not valid in this way:

  // change code below this line
  const resultDisplayArray = 
  `<li class="text-warning">${result['failure'][0]}</li>,
  <li class="text-warning">${result['failure'][1]}</li>,
  <li class="text-warning">${result['failure'][2]}</li>`;
  // change code above this line

and is valid this:

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

Is not the same result? I have complete the challenge but i want resolve my doubt.

Thanks people!


#6

In the first code resultDisplayArray is a string. In the second code, resultDisplayArray is an array.


#7

Thanks for reply @randelldawson.
But for the challenge, is not the same? Because the challenge objetive is:

 * **makeList(result.failure) should return:**
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/

here i left the challenge link:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals/

Thanks again!


#8

Those [ and ] brackets mean it is an array.


#9

I’m an stupid xD. I have not pay attention to the brackets.
Thanks @randelldawson :slight_smile:


#10

Hi, I’ve got this in the code:

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

but I keep getting invalid regular expression flags? I have backticks around the li class and /li but they are not showing properly for some reason here.

Everything displays properly on my Visual Studio program but getting an error in FCC challenge. Any help? Thanks.

I made a screenshot, for some reason looks like the program is not recognizing the template string. Everything recognizes fine in my Visual Studio. Or am I missing something else?


#11

do you solve this problem?
if yes then help us.


#12

I’m not sure what that code is jsharda39. Still working on this challenge.


#13

Same here. I can’t figure out why it says invalid regular expression flags even though I used template literals in my code. My solution is very similiar to yours as you can see below.

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

Any clue to why this doesn’t pass all the test cases? @vaidotasp


#14

It seems that you have been doing everything right, but there is a bug with the challenge itself. I would move on from the time being and work on other challenges while this one is fixed.

Here is a thread you can follow work updates on this issue: