ES6: Create Strings using Template Literals using "for"

ES6: Create Strings using Template Literals using "for"
0

#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