Very good solution, probably most effective.
If you like a shorter version, yes you can write like this.
For beginners this is confusing, so I have written the code easy for others to understand.
const resultDisplayArray = arr.map(item => `<li class"text-warning">${item}</li>`)
You can skip the function totally and write like this in your projects but if you are populating dynamic data then function and pass data through function is the best way to handle things.
const result = {
success: ["max-length", "no-amd", "prefer-arrow-functions"],
failure: ["no-var", "var-on-top", "linebreak"],
skipped: ["id-blacklist", "no-dup-keys"]
};
const resultDisplayArray = result.failure.map(item => `<li class"text-warning">${item}</li>`);
console.log(resultDisplayArray);
2 Likes
its hard to tell from your snipped as there is no even a word ‘react’ in it… can you attach a bigger snippet, please?
This is because you were return <li class...></li>, without ’ ’ quotes, the js engine thinks you want a react element. Instead you should return a string.
I have already found the problem with my first code, it was a typo with the li closing tag, @alhazen1 spotted it.
I wasn’t replying to solve the exercise, but rather the error message you were getting — “React is not defined”.
You will only get that if you attempt to return a dom element without making it a string first, unless you’re writing jsx in react.
// you had this
<li class=“text-warning” >${text}</li>
// should be this if not react
"<li class=“text-warning” >${text}</li>"
1 Like
Ok. Now I get it. Thanks.
I give up. I think there is definitely a bug in this challenge. I keep getting the message that i didnt use the string literal when i clearly did :
const resultDisplayArray = [];
for(let i=0; i< arr.length; i++){
resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`);
}
// change code above this line
returns the below:
[ '<li class="text-warning">no-var</li>',
'<li class="text-warning">var-on-top</li>',
'<li class="text-warning">linebreak</li>' ]
So how do we bypass this and get on with it?
3 Likes
Hmmmmmm… Looks like it should work to me.
I do notice this line. Maybe that is throwing the test for using template literals off somehow?
const temp = `Hello ${arr[1]}`;
If not that, maybe start a new topic with your entire function shown.
Good luck on that.
This is right and it passes for me. Have you tried clearing cookies or a different browser? Sometimes that helps.
Oh thanks… i just put that there because i was trying everything. I was trying to see if the challenge would pick an anonymous Template sting and let pass me in the task 
1 Like
Thank you your answer solution helped me understand some things.
I thought my solution was completely wrong because I kept getting the last two tests a failure with this code arr.map(word => <li class="text-warning"> ${word} </li>); However, it worked when I removed the spaces surrounding ${word}.
1 Like
I think there is a bug in the test. I cant get past the last solution. I wish the admin can look into the test for us
Hi, can you please explain this solution? Why did you use map?
Thank You
Hello Rbatra,
There are lots of ways t handle this solution. I also have a solution using a basic for loop to iterate through each element in the array, and push them into a new array. see below:
const resultDisplayArray = [];
for (let i = 0; i < arr.length; i++) {
resultDisplayArray.push(`<li class="text-warning">${arr[i]}</li>`);
}
However, the map() loops through all the individual elements in an array and performs a desired operation on each element. but most importantly, i can get the same result using fewer lines of code . Most times, that is what we desire during code minification.
Hi @chinonsoebere
Thanks for the response, but the code you mentioned here is not working for me for some reason.
Lol, the code that chinonsoebere posted is a reference, not the actual code to pass the test.
He used arr. length here you need to use result Array.
Anyhow the working source code is already posted above. And if you still have a question about how the code works then ask for help.
Yea. The code is right but, the problem, i think, is with the test. It keeps returning a string literal in the array list. I mentioned that in an earlier comment of mine. I skipped it for now, pending the time that it would be sorted out.
Am sorry about the late reply