Passing props between two functions produces error (prop is undefined)

Question

I'm using ReactJS to make a modal for a website.

My problem:

I'm passing a prop, animalName between two functions on two different pages (animals on animals.js, and AnimalModal from AnimalModal.js) to access a particular field in the dictionary so that the modal for each of them displays something different. I've been getting an error, "TypeError: Cannot read property '2' of undefined," however I'm not sure where my error is located.

What I've done:

From console logging currAnimal, the key of the majoranimals dictionary and animalName, I've found out that on the animals.js page, everything seems fine as the correct number corresponding to the key of the dictionary appears. However, when I pass that number as a prop, it no longer works to AnimalModal.js, if I were to log either the key or animalName, I get "undefined" as my value. If I click to try to get the modal to work, the error message pops up and my website crashes. Meanwhile, if I just set the key in AnimalModal.js to be an integer that is within the range of the keys of the dictionary, I can get the modal for that key to display correctly.

Where I think the error might be:

I think that the problem occurs when I am passing the prop between functions, here are snippets of the code where I think the error might be in.

In animals.js (creating and passing the prop - most likely)

  const [currAnimal, setcurrAnimal] = React.useState(0);

            .sort()
            .map((key, index) => (
                <img
                  src={`${process.env.PUBLIC_URL}/animals/2021/${majoranimals[key][2]}`}
                  alt={key}
                  onClick={() => {
                    setOpen(true);
                    setcurrAnimal(key);
                  }}
                />
            ))}

      {/*Pass Information to Modal*/}
      <AnimalModal
        animalName={currAnimal}
      />

In AnimalModal.js (receiving the prop?)

const AnimalModal = ({ handleClose, animalName}) => {
  const key = parseInt(animalName);

Thanks for reading!

Answer 1

You are not passing animalName into <AnimalModal handleClose={callbackModal} /> This will cause your app to break. A suggestion for making this code easier to understand would be change

const majoranimals = {
      // name, website, img, type, description
      0: ["Dog",
          "websiteTBA", 
          "dog.png", 
          "animal", 
          "More information will be added shortly!"
          ],
      1: ["Cat",
          "websiteTBA", 
          "cat.png", 
          "animal", 
          "More information will be added shortly!"
          ],
      2: ["Bird",
          "websiteTBA", 
          "bird.png", 
          "animal", 
          "More information will be added shortly!"
          ],

  };

to

const majoranimals = {
      dog: {name: "Dog", 
            site: "websiteTBA",
            img: "dog.png", 
            type: "animal", 
            description: "More information will be added shortly!"
       }
     ...

  };

This way you can index into the object majoranimals[key].img instead of needing to use arbitrary indices. You also would not need to worry about parseInt or keeping things sorted anymore.

From there I would change AnimalModal to take the information it needs more directly as props. eg. <AnimalModal information={majoranimals[key].information}. This way you don't need to keep the animal information in two places.