Build a Music Instrument Filter - Step 14

JavaScript
1

Tell us what’s happening:

Hello there,
I don’t know what is the issue here, could you help ,please

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
// User Editable Region

function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );

 return instruments.map(({instrument, price }) => {
      return` <div class="card">
              <h2>${instrument}</h2>
              <p>$${price}</p>
          </div>`;
    }).join('');
}

      

 
  



// User Editable Region

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Challenge Information:

Build a Music Instrument Filter - Step 14
https://www.freecodecamp.org/learn/full-stack-developer/workshop-music-instrument-filter/step-14

2

Your added line works for me, it passes the test.

However the rest of your code is formatted slightly differently. Did you change something other than adding join?

Reset the step and try it again.

4 
return instruments.map(({instrument, price }) => {
      **return**` <div class="card">
              <h2>${instrument}</h2>
              <p>$${price}</p>
          </div>`;
    }).join('');
}

I add “return”

5

What is this? Can you please explain?

6

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

7

return is already there when you reset the step.

9 
function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );

 return instruments.map(({instrument, price }) => {
     return ` <div class="card">
              <h2>${instrument}</h2>
              <p>$${price}</p>
             </div>`;
}).join('');
}
10

Can you check that again?

11

Check what? What happened? What do you want me to check?

When I reset the step, I get this starting code:

function instrumentCards(instrumentCategory) {
  const instruments =
    instrumentCategory === "all"
      ? instrumentsArr
      : instrumentsArr.filter(
          ({ category }) => category === instrumentCategory
        );

  return instruments
    .map(({ instrument, price }) => {
      return `
          <div class="card">
            <h2>${instrument}</h2>
            <p>$${price}</p>
          </div>
        `;
    })
}

The template literal is formatted slightly different than yours. Do you have any idea why?

All you need to do is add the join, which you’ve done.

12

Thank you very much , I get it. :innocent:

1 Like
13

I’m glad I could help :+1: