Buenas, ya termine casi todo el curso de React, me falta solamente esta tarea, que no le veo el error sinceramente. Me tira estos errores:
- Tu componente MoodBoard debería renderizar al menos tres componentes MoodBoardItem, cada uno debería pasar props color, image y description con valores válidos.
- Tu componente MoodBoard debería ser renderizado en el elemento #root de la página.
Se renderiza bien las 3 cards en root. Alguien lo pudo resolver ???
Hello, I have almost finished the entire React course, I only have this task left, which I honestly can’t see the error in. It throws me these errors:
- Your MoodBoard component should render at least three MoodBoardItem components, each should pass props color, image, and description with valid values.
- Your MoodBoard component should be rendered in the #root element of the page.
But the 3 cards render fine in root. Has anyone been able to solve it???
export function MoodBoardItem({ color, image, description }) {
const moodBoardStyles = {
backgroundColor: color,
};
return (
<div className="mood-board-item" style={moodBoardStyles}>
<img
className="mood-board-image"
src={image}
alt={description}
/>
<h3 className="mood-board-text">{description}</h3>
</div>
);
}
export function MoodBoard() {
const moodBoardList = [
{
id: 1,
color: "#FF0000",
image: "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg",
description: "Bosque frondoso con un camino rodeado de árboles altos.",
},
{
id: 2,
color: "#0000FF",
image: "https://cdn.freecodecamp.org/curriculum/labs/shore.jpg",
description: "Costa rocosa con agua cristalina y mar tranquilo.",
},
{
id: 3,
color: "#008000",
image: "https://cdn.freecodecamp.org/curriculum/labs/grass.jpg",
description: "Vista del mar azul con flores en primer plano.",
},
];
return (
<div>
<h1 className="mood-board-heading">Destination Mood Board</h1>
{moodBoardList.map((item) => (
<MoodBoardItem
key={item.id}
color={item.color}
image={item.image}
description={item.description}
/>
))}
</div>
);
}