Project - Animal Fun Facts

Web Development Full-Stack
28

It may well have to do with the placement of your arrow function. Did you write the arrow function before or after the for loop? The function declaration works because of hoisting . But function expressions and arrow functions aren’t hoisted, so you need to write your displayFact arrow function before the      for (const animal in animals) { ...      loop.

Try experimenting and running the following examples:

greet()

function greet() {
    console.log("Hello!")
}

// This works because a function declaration has been used to declare greet.
// Even though the function declaration is below the function call, 
// it works because the entire function declaration is hoisted.

greet()

const greet = function() {
    console.log("Hello!")
}

// ReferenceError: Cannot access 'greet' before initialization

greet()

const greet = () => {
    console.log("Hello!")
}
// ReferenceError: Cannot access 'greet' before initialization

With the above in mind,

// This won't work
for (const animal in animals) {
    ...
    onClick={displayFact}
    ...
}

const displayFact = e => { ... }

______________________________
// This will work
const displayFact = e => { ... }

for (const animal in animals) {
    ...
    onClick={displayFact}
    ...
}

With a function declaration, it doesn’t matter whether the function declaration comes before or after the loop, because the entire function declaration will be hoisted.