Logic/structure of constants/objects on step 7 from "Animal Fun Facts" [pushing from obj to empty array]

When i add this for…in loop, the component doesn’t get rendered. What is causing this?

when i remove it though, it gets rendered. im not sure where/when to place this loop so that it doesnt interfere with rendering?

import { animals } from './animals'; import React from 'react'; import ReactDOM from 'react-dom'; const title = "test"; const background = (<img className="background" alt="ocean" src="/images/ocean.jpg" />); let images = []; for(const animal in animals){ images.push( <img key: {animal} className: 'animal' alt: {animal} src: {animals[animal].image} aria-label: {animal} role: 'button' />) }; const animalFacts = ( <div> { //tertiary expression title === "" ? <h1>Click an animal for a fun fact</h1> : <h1>{title} </h1> } {background} </div> ); ReactDOM.render(animalFacts, document.getElementById('root'));

Hi Khalil,
welcome to the forums!
The codebyte highlights syntax errors, so you can already see the problem here:
From line 12 to 17 you set the image attributes/props with colons. Image attributes and props are assigned with equal signs in HTML and JSX.

1 Like

Hi! Thank you, i missed that.
However, the element does not get rendered still. What could be the reason for this?

Ok, that was the obvious. Then this might also be a problem:

aria-label

In JXS that should probably be camel cased, I guess.
If you still have the same problem (nothing at all is rendered, right?), open the browser’s console. It must log an error. What does it say?

ty!
no errors on the console!
(also no errors for syntax/errors on the editor. is it suppose to give feedback?)

sorry there is an error!

“Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘https://www.youtube.com’) does not match the recipient window’s origin (‘https://www.codecademy.com’).”

not sure if this is relevant to the question at hand

wait sorry its working now! ty!!

You’re welcome. Usually you can rely on the browser’s console as it usually throws relevant errors among those that may be related to the CC environment.

1 Like
console.log('thanks!');
1 Like

hi again,

function displayFact(e){
const selectedAnimal = e.target.alt;
const animalInfo = animals[selectedAnimal];
console.log(e);
}
console:
Proxy { : {…}, : {…} }
: Object { dispatchConfig: null, _targetInst: null, nativeEvent: Getter & Setter, … }
: Object { set: set(e, t, n) }

what is proxy mean here? and do i need to know more about e itself or just e.target + handler?

Hey,

I never worked with the Proxy and it’s not required to do so in the exercise. This MDN article explains what it is though.

displayFact is a function that is called after an onClick event, right? Then, whatever you call the parameter – you called it ‘e’, it will always be the event itself. And a JS event always has a target property. The target usually is the DOM node the event is fired on. So whatever you want to know when logging to the console: logging e.target will probably be more telling. What you do know now is that your function runs at least…

1 Like

I think the element does not get rendered still