Build a Mood Board - Steps 2 and 4

Curriculum Help
,
1

Tell us what’s happening:

Kind of tearing my hair out, cause I could swear I should be passing these tests:

  1. Your MoodBoardItem component should return a div with a class of mood-board-item at its top-level element.
  2. Your MoodBoardItem component should render an img element with a class of mood-board-image and its src set to the value of the image prop.
  3. Your MoodBoard component should render at least three MoodBoardItem components, each should pass color, image, and description props with valid values.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mood Board</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/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 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 = () => {
  const moods = [
    {
      color: "#eb4034",
      image: "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg",
      description: "Calgary",
    },
    {
      color: "#3434eb",
      image: "https://cdn.freecodecamp.org/curriculum/labs/shore.jpg",
      description: "Toronto",
    },
    {
      color: "#3deb34",
      image: "https://cdn.freecodecamp.org/curriculum/labs/grass.jpg",
      description: "Vancouver",
    },
    {
      color: "#34d2eb",
      image: "https://cdn.freecodecamp.org/curriculum/labs/ship.jpg",
      description: "Winnipeg",
    },
    {
      color: "#ebb434",
      image: "https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg",
      description: "Ottawa",
    },
    {
      color: "#eb3458",
      image: "https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg",
      description: "Montreal",
    },
  ]
  return(
    <div>
      <h1 className="mood-board-heading">Destination Mood Board</h1>
      <div className="mood-board">
        {moods.map((mood) => {
          <MoodBoardItem 
            color={mood.color}
            image={mood.image}
            description={mood.description}
          />
        })}
      </div>
    </div>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Challenge Information:

Build a Mood Board - Build a Mood Board

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-mood-board/673b3d6b7ef7318eef926d5a.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @morgs99

Your MoodBoardItem component should return a div with a class of mood-board-item at its top-level element.

What is the keyword here?

Next, see if you can figure out why the image is not displaying.

Happy coding

3

Thanks for the welcome!

I fixed it by adding an explicit return to the map, is that what you were aiming me towards? I got it passing as well by only putting single brackets around the img tag.