Build a Mood Board - Stuck on last two steps

JavaScript
1

Tell us what’s happening:

// running tests
9. Your MoodBoard component should render at least three MoodBoardItem components, each should pass color, image, and description props with valid values.
10. Your MoodBoard component should be rendered to the page’s #root element.
// tests completed
// console output
[TypeError: moodboard is undefined]

I can’t tell why moodboard is undefined especially since the components are rendering in the preview window. I have four MoodBoardItems in my MoodBoard component and it’s still not passing Step 9

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mood Board</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root">
    </div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { MoodBoard } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <MoodBoard />
      );
    </script>
  </body>
</html>

/* file: index.jsx */
export const MoodBoardItem = ({ color, image, description }) => {
  return (
    <div className="mood-board-item" style={{
      backgroundColor: color
    }}>
      <img className="mood-board-image" src={image} />
      <h3 className="mood-board-text">{description}</h3>
    </div>
  )
}

export const MoodBoard = () => {
  return (
    <div>
      <h1 className="mood-board-heading">Destination Mood Board</h1>
      <MoodBoardItem color="#0000ff" image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg" description="Here" />
      <MoodBoardItem color="#e3e3e3" image="https://cdn.freecodecamp.org/curriculum/labs/shore.jpg" description="There" />
      <MoodBoardItem color="#ff44aa" image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg" description="Where" />
      <MoodBoardItem color="#23ff11" image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg" description="Where" />
    </div>
  )
}



/* file: styles.css */
body {
  background-color: #ffffcc;
}

.mood-board-heading {
  text-align: center;
  font-size: 2.5em;
  color: #333;
  margin-top: 20px;
}

.mood-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.mood-board-item {
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  height: 250px;
}

.mood-board-image {
  border-radius: 5px;
  width: 180px;
  height: 150px;
  object-fit: cover;
}

.mood-board-text {
  margin-top: 20px;
  font-size: 1.2em;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Build a Mood Board - Build a Mood Board

2

Hi there. I couldn’t found the issue in your code. But it’s throwing that below error for me :
[TypeError: Cannot read properties of undefined (reading 'querySelectorAll')]

3

Your MoodBoard component should render a div with a class of mood-board.

The item components should be inside that element.

4

Whoops, missed that. Thanks so much for your help!