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

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.

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

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()

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)

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.

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>`)
  }

@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

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

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

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
[email protected] mkleinhaus@gmail.com
206-234-4887

On Sun, Jun 3, 2018 at 6:10 AM, aenkirch notifications@github.com 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
https://github.com/freeCodeCamp/freeCodeCamp/issues/16358#issuecomment-394161176,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AQdgL5WB3BsARAzpDfgyWHG8VsYm29yaks5t4-A3gaJpZM4ROiPm
.

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>);

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.

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

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);****

i'm having the same problem

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

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

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.

In continuation to https://github.com/freeCodeCamp/freeCodeCamp/issues/16358#issuecomment-396369730,
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>`
  }

@kanexte thank u

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.

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.

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.

how did u solve the issue @richa031

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

@Tirjasdyn i Am having the same issue , fcc Es6 section is so broken. Very less instructions. No instruction of how to use map(), filter() , reduce() in previous challenges too .

is there any proper solution to this prob ?

@Omerdogan3 This is not the correct way , as you look in the challenge the desired output is
makeList(result.failure) should return:

• [
• no-var
,
• var-on-top
,
• linebreak
]
as your solution didn't print comma or ',' .

I'm in agreement with @scissorsneedfoodtoo that the regex in test case is too restrictive.

I'm no regex wiz but this is what I came up with /<li class="text-warning">\$\{[\w\[\]]+\}<\/li>/g (without the backslashes escaped for string). This would allow for... loop solutions that accessed the array with bracket notation arr[i] which appears to be disallowed with the current regular expression test.

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

Still getting Invalid regular expression flags

I just get Invalid regular expression flags

I’m still receiving errors for correct solutions, as well.

still getting the> Invalid regular expression flags

Hi all. Thank you for taking the time to update us about this ongoing issue. Just wanted to let you all know that the regex test for this challenge was updated recently, and it should be pushed to production soon.

Still getting Invalid regular expression flags with:

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

@mirkocoppola80 yeah, I'm not sure how often their merge/builds are. I don't think they've done one since May 30th though, so we're waiting on that for the changes to take effect.

Invalid regular expression flags for today,waiting for the update...

i try wiht map, for loops, etc, but i don found a solution. You can see it, maybe found a key idea. https://www.youtube.com/watch?v=XzExdQye1Ls

@jsparadacelis I follow the code on that video ,that doesn't work

Hi, I am also still getting Invalid regular expression flags with:

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

It is still not working. Can we have a light here please ?

Yep still can't find a working solution to this challenge

I get Invalid regular expression flags error.

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

I also get the Invalid regular expression flags error for below.

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

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

Confirmed still not working

Still not working, rather frustrating

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

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

Still not working for me.

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

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>

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

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

still waiting for fix

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

Getting Invalid regular expression flags result.

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

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

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"

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

Still not fixed! 😢

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

Still not working..

Same problem;

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

returns the error "invalid regular expression flags"

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

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

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

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

Confirmed now works with

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

Thanks for the fix.

Aleluya!! it works

alleluia.finally works

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 ;

Below you can find the code that works :) :

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);