Create Strings using Template Literals

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. :roll_eyes:
Sometimes one needs a fresh pair of eyes (and some awake neurons too :wink:)
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!!! :slight_smile: :slight_smile:

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!!! :slight_smile:

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

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