Animal Fun Facts Task 9

Language Help React.js
1

Stuck on task 9. I understand everything up until this:

  1. We want this function to pick a random fun fact based on the selected animal.
  2. Inside of the function, use e.target.alt to get the name of the animal being clicked.
  3. Generate a random index and use it to access an element in the animal’s .facts array.
  4. Save the fun fact in a variable.
2

Hi @asradose
Welcome to the forums!
Could you provide a link to the exercise, please?
And can you specify what exactly you do not understand? I’m sure you understand point 4, for example.

3

Hi, thanks.

Honestly, at this point i’ve looked at this so much my mind feels fried.

This is the link: https://www.codecademy.com/courses/react-101/projects/js-react-animal-fun-facts.

Obviously, I understand how to store something in a variable, but in relation to this… no.

4

I’m sure you could break it down a little further.
You could start by providing this as code:

Create a function displayFact() that takes one argument e , the event.

Please make sure it’s properly formatted:
How to format code

Then, inside the function you could add this console

console.log(e.target, animals)

and see how you could combine the event target and the animals object in order to fetch the targeted animal’s facts.
Since the click event has already been added in step 7 you should be able to see the output after you clicked an animal in the browser’s console.

1 Like
5

I struggled a bit when I did this project too, but you’ll get through it with a bit or peseverance :slight_smile:

As @mirja_t mentioned, it’s easier for us to help if you share your code. From the community guidelines:

The Do’s and Don’ts

✓ Do format your code before posting.

  • Do make sure you post your question in the right category.
  • Do make sure you put the instructions, error and link to the exercise you are stuck on in your post.
  • Do make sure you put the exercise number in the post title.
  • Do ask for help if you need it!

✘ Don’t ask for help on an exercise without posting code.

For Step 9

  • Think through what is going to happen… someone will click on one of the animals (e.g. the dolphin), which will have an event handler on it (you will write that in a later step), which will trigger the function you are writing. The function will have the event from the event handler passed to it as an argument, from which the function needs to extract which animal was selected(e.g. dolphin), then use this information as the key to access the dolphin object from within the animals object… Generate a random index, and use the index to get a random fact from the dolphin object - saving this fun fact into a variable.
  • It’s worth looking at the cheatsheet for this lesson - the section called JSX element event listeners which should help with writing the function. (point 2)
  • There is a hint in the lesson which should help you generate a random index, which can then be used to pick a random fact. (point 1 & 3)

Good luck :slight_smile:

6

Quick Question: In the project walkthrough, under the function displayfacts, he put the variable,

const animalInfo = animals[selectedAnimal]

video link: animal Info variable

Why did he put “selectedAnimal”, and where did it come from if there’s no other variable or function with that specific name in the other objects?