Tell us what’s happening:
Can anybody tell me what’s wrong here, I tried lot of differente scenarios for this with and without brackets, I tried everything to make it in lines like example in comments… In Google Chrome console works fine… Displays like example in comments…
Your code so far
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-warining">${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);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:55.0) Gecko/20100101 Firefox/55.0.
Link to the challenge:
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals
2 Likes
Hi @Saymon85,
The results can be achieved by looping through failure array.
Hints*:
- Loop through result.failure Array.
- Create a template literal to wrap </li> items.
- Use ${resultVariable} to embed inside </li> items
- Change resultDisplayArray to Array[];
I hope this helps you to solve the challenge, if not then you can check the working code at bottom.
Spoiler Alert: solution ahead
const resultDisplayArray = [];
arr.map(val => resultDisplayArray.push(`<li class=“text-warning”>${val}</li>`))
12 Likes
I am not sure if I’m getting this right, but it seems that result display array has to be an array, not a string. Also, your code would only work for arrays with three items or more, what happens if the input has length 2 or 1? And if it has more than 3 items, it only processes up to three of them. Maybe you need to build a new array from the one passed as argument to the function.
I’m trying to solve the challenge, but couldn’t pass the test. I don’t want to look at @Randore’s solution yet.
What I’ve done: build a new array of `<li class="text-warning">${element}</i>`, where element is an item from the original array.
That only passes the first test: resultDisplayArray is a list containing result failure messages.
I don’t understand what’s the intended result then.
That means that you are able to create the list of result.failure but you need a proper way to pass those into resultDisplayArray to get the desired output.
This is my code, the one that only passes the first test:
const resultDisplayArray = arr.map((text) => `<li class="text-warning">${text}</i>`)
Why is it wrong? What’s missing?
The closing tag should be </li>.
1 Like
I have the same problem as zdflower.
resultDisplayArray expects an array of strings as the return type. By putting template literals outside the array, you’ve essentially turned the array into a string.
Instead it should look like this
const resultDisplayArray = [`<li class=....`, `<li class=...`]
If instead you want dom nodes, then it’ll look like this
const resultDisplayArray = [<li class="text-warning">`${arr[0]}`</li>, ...]
Only put template literals around what you actually want to be a string. And if you want to use variables, use interpolation ${}
1 Like
You’re returning a string, and not a dom node because you put the template literal in the wrong place. Look at my previous explanation for an example. Create Strings using Template Literals
@Balancedsan tagged you since you have the same problem
Now, I tried this:
const resultDisplayArray = arr.map(text => <li class="text-warning" >`${text}`</li>);
The results are:
// running test
React is not defined
React is not defined
React is not defined
// tests completed
Back ticks need to go around entire string returned in .map function.
You are creating an array of strings for this challenge
2 Likes
That’s what I did in my first attempt, but didn’t pass the tests. So I keep trying things.
But just a moment ago while replying this, I tried again with the first version, and worked. You were right in the previous answer, the closing tag for the list item was misspelled. 
Sometimes one needs a fresh pair of eyes (and some awake neurons too 
)
Thanks!
By the way, I am afraid I’m going to dream about this challenge.
2 Likes
Hey ppl, thank you all… I misunderstood what it is wanted result in this challenge. When I put it in array it worked perfectly.
Thank you again, very appericate your help!!! 
Those hints were key for finding solution on my own. Just needed to put it in array… It’s simple I just didn’t got it on the first. Thanks!!!
Just another hint… for…of loop with array push method may do the trick…
I still am not sure why I am wrong here, I even console.log the result and it looks the same as the expected result. my back tag is embedded around the li items. And i only got the first test right
I understand now that we are suppose to create an array of string.
const resultDisplayArray = [];
arr.map(value =>resultDisplayArray.push(<li class = "text-warning">${value}</li>));
console.log(resultDisplayArray);
it returns back an array of string literals (not sure why my ans dosent have `` around the li. I had the back tag around the li values)
oh gosh , my answer was all along correct. Spacing can make a lot of difference.
I’m made similar mistake,<li class="text-warning"> ${value} </li>, there shouldn’t be white space between value and > and <…
I was having trouble understanding this challenge, but with the help of this thread, came up with the following that passes the tests (doesn’t need to initialize the array, regarding that, is one solution more efficient/better/more correct?):
const resultDisplayArray = arr.map(val => {return <li class="text-warning">${val}</li>});
1 Like