ES6: Create Strings using Template Literals - Test Fails - Doesn't detect template strings

[mstellaluna]

Challenge Name

https://beta.freecodecamp.org/en/challenges/es6/create-strings-using-template-literals

Issue Description

The challenge is failing the last test, 'Template strings were used'.

Browser Information

Browser Name, Version:
Operating System: FireFox 57.0 (64-bit) and Chrome Version 63.0.3239.84 (Official Build) (64-bit)
Mobile, Desktop, or Tablet: Laptop Windows 10 Professional 64-bit

Your Code

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

Screenshot

[mstellaluna]

Update: after some investigation by one of our campers, it seems the staging branch fixes the issue but has not been ported over to beta.

[systimotic]

I can confirm that it does work on staging, but I think the description could use a bit of clarification.

[vipatron]

Had a similar issue. Agree with systimotic. Text change in the test cases proposed as follows:

Current: Template strings were used
Proposed: Template strings were used with map()

[PolarisTLX]

I have looked into this today, the challenge does not indicate that using .map() is required, and I was able to solve/complete it with and without using .map(). Therefore I don't believe that this needs any changes?

Paul (@PolarisTLX) and Kyle (@jklemon17)

[scissorsneedfoodtoo]

I checked this out recently using @mstellaluna's solution and also solved it without using map as @PolarisTLX did. Using map is probably the most concise way to complete this challenge, but I think we should leave it up to users how to go about it. I'm not sure the description needs any changes since the user is told what the makeList function should return.

[yoizfefisch]

Seems like map is now the only passing method in the new version. The following 2 methods failed 'Template strings were used':

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

const resultDisplayArray = [];
  for (let i = 0; i < arr.length; i++) {
    resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`)
  }

[scissorsneedfoodtoo]

@yoizfefisch, you're right. Both of those are valid solutions, but they don't pass.

It seems like test case for template literals is not quite flexible enough:

getUserInput => assert(getUserInput('index').match(/\\`<li class=\"text-warning\">\\$\\{\\w+\\}<\\/li>\\`/g)

The regex doesn't expect brackets before the next curly brace, and your solutions cause the test to fail. Should be a simple enough fix. I'm not the best with regex, but this should allow for different solutions like the ones above:

\`<li \s*class\s*=\s*(\"\s*text-warning\s*\"|\'\s*text-warning\s*\')\s*>\s*\$\s*\{(\s*\w+\s*|\s*\w+\s*\[\s*[\w]+\s*\]\s*)\}\s*<\s*\/li\s*>\`

I'm not sure exactly where some characters would have to be double escaped with two slashes like in the current tests, though. Would anyone here in interested in updating this test and submitting a PR?

Also, here's an updated link to the challenge in question:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals

[Flite999]

Would also like to report this is still an issue, map works for the solution.

[aenkirch]

Considering I have the same problem on the stable version of ES6 on FCC that was just deployed earlier this week, I have some doubt considering my code.. Can someone help me ?

Here is my code : https://repl.it/repls/DizzyNiftyLocatorprogram

[Flite999]

Push doesn't work in this exercise (or it hasn't or me and seems like others), use the .map method to pass the test. *Mark Kleinhaus* *mkleinhaus@gmail.com <mkleinhaus@gmail.com>* *206-234-4887*

…

On Sun, Jun 3, 2018 at 6:10 AM, aenkirch ***@***.***> wrote: Considering I have the same problem on the stable version of ES6 on FCC that was just deployed earlier this week, I have some doubt considering my code.. Can someone help me ? Here is my code : https://repl.it/repls/DizzyNiftyLocatorprogram — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#16358 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQdgL5WB3BsARAzpDfgyWHG8VsYm29yaks5t4-A3gaJpZM4ROiPm> .

[Omerdogan3]

They are passing result.failure as a parameter.

The Right Answer Is

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

[P1xt]

confirmed:

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

works
but

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

does not work. And, there's no mention of map in the lesson - and, map isn't even introduced in the curriculum until the Functional Programming section which comes after this section.

[inquiloper]

@P1xt Having the same problem. Thankfully is not only me.

[richa031]

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 =
 [`<li class="text-warning">${arr[0]}</li>`, 
  `<li class="text-warning">${arr[1]}</li>`, 
  `<li class="text-warning">${arr[2]}</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);****

[richa031]

i'm having the same problem

[inquiloper]

@richa031 As pointed out above, you need to use Array.map, with your approach does not work.

[richa031]

is there anything i wrote wrong? and why are we using map function here?

[kanexte]

It's a silly issue but but double quotes are also required between the string literal when single quotes should be an acceptable solution as well.

[abhijeetps]

In continuation to #16358 (comment),
I would like to add that this neither works:

const resultDisplayArray = [];
  for (let i = 0; i < arr.length; i++) {
    resultDisplayArray[i] = `<li class="text-warning">${arr[i]}</li>`
  }

[richa031]

@kanexte thank u

[bapinney]

Just wanted to chime in and mention I am having this same problem, too. Glad to hear it's not me. Hope it gets fixed soon.

[numoonchld]

Facing the same issue. I guess I'll have to keep this challenge officially unfinished and move on. IM(H)O - for the scope of this challenge, referencing the array elements by their indices is the most elegant solution and using map/loops clutters up the code.

[Tirjasdyn]

I am also having this problem. I tried using map and I now get an error that says:

React is not defined

I thought I was getting this too but throwing map in here just makes it unnecessarily difficult.

[raftar2097]

how did u solve the issue @richa031

[osmi2017]

P1xt is rigth array.map is the key for this challenge but you shouldnot forget that it takes a function as a parameter

[kguevara]

I’m still receiving Invalid regular expression flags error.
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals/

[OumaimaTiguint]

I tried it with map and everything and I still get Invalid regular expression flags

[dbaleeds]

Confirmed still not working

[ryanxmccarthy]

Still not working, rather frustrating

[typhoon93]

Right now neither MAP method nor the more simple but lengthy approaches work, same error - "Invalid regular expression flags" even though the other tests are passed

[ThiagoRAD]

Hey, if anyone found a way please tell meeee, I can't advance xD (i know i could skip it but oh my OCD)

[ericvida]

Still not working for me.

[Yonazar]

Hey, i'm just another guy to write that it still doesn't work.

[cdmccauley]

I've seen that this is supposedly fixed and not yet deployed but, wanted to post in case it needs more info. I've confirmed the correct output with console.log() however, my solution does not pass the test "Template strings were used".
my code:

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

console output:

// running test
Invalid regular expression flags
// tests completed
<li class="text-warning">no-var</li>,<li class="text-warning">var-on-top</li>,<li class="text-warning">linebreak</li>

[TheNewStyles]

Still not working. const resultDisplayArray = arr.map(num => '<li class="text-warning">${num}</li>');
// running test
Invalid regular expression flags
// tests completed

[mihaid85]

Map method still doesn't work. With or without return.

[alex88K]

still waiting for fix

[LML013]

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

Getting Invalid regular expression flags result.

[seely1991]

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

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

both don't work for me, I thought it was my code, but it seems like something is broken

[baisho]

Tried to solve it today, but it still doesn't work.

[thembones79]

I've tried it also with escape marks:

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

but it is still "Invalid regular expression flags"

[omendez30]

I too have tried to solve it, but continue to get the same "Invalid regular expression flags" as an output. 2 out of the three test are being passed but I continue to get the message.

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

I also used a simple for loop and get the same result

[alessiomaddaluno]

Still not fixed! 😢

[coolcourd]

yeah i have written it like 4 ways and it doesnt work. its busted. just skip it and move on

[Cr0s4k]

Still not working..

[bauerpm7]

Same problem;

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

returns the error "invalid regular expression flags"

[Magvin]

Confirm still not working.
Tried forEach, for loop,map..No idea what is going on with this challenge

[jasjitsm]

Yup, still not working. Getting the same error as everyone else, "Invalid Regular Expression Flags."
Tried with map, forEach, etc.

[alex-mos]

It works! I try the same solution with map every week and now it has passed! Hooray!

[jasjitsm]

Worked for me too! :) Wasn't working yesterday.

[alexanderc12]

Confirmed now works with

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

Thanks for the fix.

[Cr0s4k]

Aleluya!! it works

[chenjacky131]

alleluia.finally works

[federicosan]

this should work without the map function, just using normal template literals, ass this would teach how space is preserved without adding
tags or &nbsp ;