No longer seeing updates in preview workspace

Web Development Full-Stack
1

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

I made it to step 9 before this project just went completely off the rails for me. After I tried adding the element containing my ‘images’ array under the { background } element, it’s like the virtual DOM just stopped updating entirely.

Just as a test, I tried changing some of the text that I already was able to display in the h1 and nothing was happening even after saving, refreshing the iframe, or reloading the webpage. Now, after having cleared my browser cache, restarting the entire project 3 times, and attempting to recrate everting in JSBin (and failing, since I haven’t used that site in years), I still can’t get the render.root() method in app.js to display anything. I tried both re-writing everything from scratch and just pasting what I’d initially saved (since the only thing I’d initially changed was the lines inside the for loop). I’m not sure what’s wrong anymore, to be honest. Is it a syntax issue or do I need to do more browser troubleshooting?

2

There might be more issues, but for the time being, consider exploring the following two issues:

  • Regarding getElementById
// You wrote:
const container = document.getElementById('#app');

// Consider changing to:
const container = document.getElementById('app');
  • In your img elements, you are using     :     to separate attributes from their values, whereas     =     should be used.
// You wrote:
<img
    key:{animal}
    className:'animal'
...

// It should be:
<img
    key = {animal}
    className = 'animal'
...
3

Thank you! That first error was because I initially was using ‘querySelector’ and I think after trying both back-and-forth, I forgot to update the content in the parenthesis.

Unfortunately, after fixing those two edits–and moving to a new device–I still can’t get anything to render. But I’m working on it…

4

Also,

// You wrote:
for (animal in { animals }) {
  images.push(
    <img
    key={animal}
    className='animal'
     ...

// It should be:
for (const animal in animals) {   // OR for (let animal in animals) { ...
  images.push(
    <img
    key={animal}
    className='animal'
     ...

In the import statement,

import { animals } from './animals';

the curly braces are necessary as we are doing a named import.

Once we have imported animals, and we want to use a for-in loop to iterate over the properties of the animals object, then we don’t need the curly braces in the statement (we will need the curly braces in the values for the attributes of the <img> elements),

// Incorrect
for (const animal in {animals})
// In this situation, {animals} will actually nest the animals object inside 
// another object which is not what we want.

// Correct
for (const animal in animals)
// This will iterate over the properties of the animals object

const x = {a: 1, b: 2, c:3}

// We want this
for (let y in x) {
    console.log(y)
}
// "a"
// "b"
// "c"

// Don't want this
for (let y in {x}) {
    console.log(y)
}
// "x"
5

Thank you, again. That makes more sense. I asked a few other people for help as well and they showed me what else was wrong. But, to be honest, I’ve gone through and changed so much that I can’t remember what exactly got it working.
The curriculum also went over the named and default imports in the next section so I see what you mean now.