Build a Mood Board - Stuck at test number 3 and 9

JavaScript
1

Tell us what’s happening:

I don’t know why my test was always failing. I tried to add a console but the result was suspicious.
// running tests
3. The background color of the .mood-board-item element should be set to the value of color prop using inline styles.
9. Your MoodBoard component should render at least three MoodBoardItem components, each should pass color, image, and description props with valid values.
// tests completed
// console output
string string string
string string string
string string string
string undefined undefined
undefined string undefined
undefined undefined string

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: 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;
}

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

export function MoodBoard() {
  return (
    <div>
      <h1 className="mood-board-heading">Destination Mood Board</h1>
      <div className="mood-board">
        <MoodBoardItem color="red" image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg" description="A pathway"/>
        <MoodBoardItem color="green" image="https://cdn.freecodecamp.org/curriculum/labs/shore.jpg" description="A shore"/>
        <MoodBoardItem color="blue" image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg" description="A grass"/>
      </div>
    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Mood Board - Build a Mood Board

2

remember that when you are writing in jsx inside {} you are writing javascript again, so that means that to use variable color you should not wrap it into brackets or you will write an other object

3

Oops.. thank you for the reminder