Trouble understanding a function in Football Team Cards project

JavaScript
1

I just finished the football team cards project and I couldn’t figure out what the “setPlayerCards” function is supposed to do. Especially the parameter of the map() method and how the template literal is being concatenated.

Can anyone kindly explain to me what this function exactly does in football team cards project?

const setPlayerCards = (arr = players) => {
  playerCards.innerHTML += arr
    .map(
      ({ name, position, number, isCaptain, nickname }) =>
        `
        <div class="player-card">
          <h2>${isCaptain ? "(Captain)" : ""} ${name}</h2>
          <p>Position: ${position}</p>
          <p>Number: ${number}</p>
          <p>Nickname: ${nickname !== null ? nickname : "N/A"}</p>
        </div>
      `
    )
    .join("");
};
2

The map function is taking the array contents and transforming them into HTML string. Then the strings are joined together into a single long string of HTML. Which is then appended directly to the playerCards inner html code.

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.