Tell us what’s happening:
Task is to call map on arr parameter and use addition assignment on it with playerCards.innerHTML.What is wrong
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
// User Editable Region
function map(arr=()=>{}){};
arr.map+=playerCards.innerHTML;
// 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/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Challenge Information:
Learn Modern JavaScript Methods by Building Football Team Cards - Step 23
Inside the setPlayerCards function
You are already inside an arrow function on this step, yet you’re creating another function that you were not asked to create.
assign the new array to playerCards.innerHTML
You did not assign the new array to playerCards.innerHTML.
How about now?
playerCards.innerHTML+= arr.map((callback=()=>{})=>{});
Better. But this needs work: arr.map((callback=()=>{})=>{})
start by adding the map method to arr that will take in an empty callback function
Do you have questions about how to create an empty callback function?
This might help: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions#syntax
What should the callback function be instead of “callback”
This article says:
A callback is a function passed as an argument of another function.
And the MDN JavaScript Reference for the Array map() method shows this syntax:
map(callbackFn)
And, if you need a refresher on arrow functions, take a look at this article.
playerCards.innerHTML += arr.map((player=()=>{})=>{return <div class="player-card">${player.name}</div>}).join(“”)
The call back function (the argument to arr.map()) is empty - the instructions say the map method will take in an empty call back function. You need to write an empty call back function. Just the syntax with nothing in it.
Focus on figuring out what an empty callback function looks like.