ES6: Create Strings using Template Literals using "for"

JavaScript
1

Can you tell me why my code is not working?
I get SyntaxError: unknown: Unexpected token (11:2) it says in pleace where “for” starts is unexpected

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 = 
  for (var i = 0; i < result.failure.length; i++){
  <li class="text-warning">`${result.failure[i]}`</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);

SyntaxError: unknown: Unexpected token (11:2)
   9 |   // change code below this line
  10 |   const resultDisplayArray = 
> 11 |   for (var i = 0; i < result.failure.length; i++){
     |   ^
  12 |   <li class="text-warning">`${result.failure[i]}`</li>
  13 |   }
  14 |
2

Hi Aerogirl,

For loop aren’t meant to be attributed to a variable (I might be wrong but I never saw that).

Maybe you should use “map” method instead.

3

I think part of your problem is const resultDisplayArray twice. Within the function, you may want to just bind an empty array to a different variable, and then have it return that variable.

function makeList(arr) {
  "use strict";

let arrayOfList = [];

for (var i = 0; i < result.failure.length; i++) {
// arrayOfList.push("your list items");
}

return arrayOfList;

Your <li> </li> should also be wrapped in backticks.

4

Or you could use map instead, you are looping over an array and at the same time you are assigning the loop to a variable and not the result of the loop, that’s syntactically wrong. instead you could use map like this

const resultDisplayArray =  result.failure.map((item, index) => {
  <li class="text-warning" key={index}>{item}</li> 
})

remember map is an array function that iterates over the array and returns a new array. also, do not forget to include the key attribute in your <li> tag because react require a unique index in list

5

Yeah, I saw everybody using map to do this challenge so I wanted to do it different way. I thought that it may not work as for is inside "const resultDisplayArray " but I hoped you have some workaround to specifically use “for” :wink:
I somehow can’t go natural with using map so I always try to find “the other way”.

6

You can assign expressions to variables (ie things return a value). A for loop is a statement, it returns no value. So const resultDisplayArray = for (let i =.... makes no sense. But you’ve already done basic JS, which has several examples of how to do this:

const resultDisplayArray = [];

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

return resultDisplayArray;
2 Likes
7

Yeah! I tried the same thing but I messed up use of

`

I left it inside of “li” and I got message that “React is not defined”.

Many thanks, that exactly what I wanted to do!

1 Like