CORB errors

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

The above code byte gives me several ongoing CORB errors.

As a result the solution checker doesn’t give any feedback and has stopped rendering the solution.
Is there a way for me to bypass these CORB errors and get my code working? Should this be reported as an error?

D

A cross origin error is a very generic error that is caused by all possible sorts of issues in your code.
This for example is an issue:

<img key: {animal} 
    className: 'animal' 
    alt: {animal} 
    src: {animals[animal].image} 
    ariaLabel: {animal} 
    role: 'button' />

You are trying to push a JSX/Html element to the array. In html you have to use equal signs for the assigment of properties – not colons.

2 Likes
import {animals} from "./animals"; import React from "react"; import ReactDOM from "react-dom";

Also needed the proper imports and = as you mentioned ::smiley:

Thanks,
D

1 Like