How to make comments in JSX?

I’m working on Animal Fun Facts in the “Building Front End Applications with React” Course and am following along with the video tutorial, trying to write comments next to certain lines of code that I want to return to later.

I know how to comment in JSX:

{/*This is a JSX comment*/}

but I spent some time debugging my code last night and concluded that you can’t just insert comments anywhere you want or it can break your code. For instance, the following block of code was keeping my code from displaying as expected:

const images = [];
for (const animal in animals) {
	{/*this is going to fill up the "images" array with the images we need...*/}
	images.push(
		<img
			key={animal}
			className="animal"
			alt={animal}  {/*the name of the animal;*/}
			src={animals[animal].image} {/*this is where we get our image of each animal. It is     
      stored in "animals.js." Each array item inside the "animals" object, contains a key   
      called, "image" and the associated value is the location path for the animal picture we 
      want to appear onscreen. To access this, We key into our animals object and grab our  
      image path for each animal*/}
			ariaLabel={animal}
			role="button"
			onClick={displayFact} {/*Event Handler*/}
		/>
	);
}

It was only when I removed each of the three comments inside of <img /> that my code worked as expected. I concluded that I need to be careful about where I place comments within my JSX, because commenting the meaning of my code line by line caused me to spend a lot of time debugging my code (there weren’t any helpful error messages for me to follow).

Is my problem that I tried to comment within an element, (in my case the <img /> element)? I ended up “solving” my problem by relocating my comments below the for-loop as shown below:

const images = [];
for (const animal in animals) {
	{/*this is going to fill up the "images" array with the images we need...*/}
	images.push(
		<img
			key={animal}
			className="animal"
			alt={animal} 
			src={animals[animal].image}
			ariaLabel={animal}
			role="button"
			onClick={displayFact}
		/>
	);
}
{/* NOTES ON ABOVE:
    alt={animal} <-- the name of the animal;
    src= {animals[animal].image} <-- this is where we get our image of each animal. It is     
      stored in "animals.js." Each array item inside the "animals" object, contains a key   
      called, "image" and the associated value is the location path for the animal picture we 
      want to appear onscreen. To access this, We key into our animals object and grab our  
      image path for each animal
    onClick={displayFact} <-- Event Handler
  */}

With my comment relocated, the code worked again, but I’m unsatisfied with the formatting here because when reading a comment, I have to reference the code block above, instead of seeing the comment directly next to the pertinent line of code.

After that debugging session, I’m left with a couple questions:

  1. Are my conclusions correct about the limitations of commenting in JSX, namely, you cannot comment inside an element?
  2. If there is a way to do what I was trying to do and I was just doing it wrong, then what is the correct way?