Build a Reusable Profile Card Component - Step 9

JavaScript
1

Tell us what’s happening:

I’m not sure what’s wrong here. This code snippet works perfectly fine in the browser console, so syntax error can be ruled out. The hint says that the profiles array should contain an object that includes all required properties, but my object does have them.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Card component</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 { App } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <App />
      );
    </script>
  </body>
</html>

/* file: styles.css */
:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f6f7;
  --dark-orange: #f89808;
}

body {
  background-color: var(--dark-grey);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.card {
  border: 5px solid var(--dark-orange);
  border-radius: 10px;
  width: 100%;
  padding: 20px;
  margin: 10px 0;
  background-color: var(--light-grey);
}

.card-title {
  border-bottom: 4px solid var(--dark-orange);
  width: fit-content;
}

@media (min-width: 768px) {
  .card {
    width: 300px;
  }
}

/* file: index.jsx */
export function Card({ name, title, bio }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p className="card-title">{title}</p>
      <p>{bio}</p>
    </div>
  )
}

export function App() {

{/* User Editable Region */}

  let profiles = [
    {
      "id": 1,
      "name": "Mark",
      "title": "Frontend developer",
      "bio": "I like to work with different frontend technologies and play video games.",
    },
  ]

{/* User Editable Region */}

  return (
    <div className="flex-container"></div>
  );
}

Your browser information:

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

Challenge Information:

Build a Reusable Profile Card Component - Step 9
https://www.freecodecamp.org/learn/full-stack-developer/workshop-reusable-profile-card-component/step-9

2

I just figured out that

const profiles = [
    {
      id: 1,
      name: "Mark",
      title: "Frontend developer",
      bio: "I like to work with different frontend technologies and play video games."
    }
  ]

works, but not

const profiles = [
    {
      'id': 1,
      'name': "Mark",
      'title': "Frontend developer",
      'bio': "I like to work with different frontend technologies and play video games."
    }
  ]

which is weird, because both are the same. Maybe a misconfigured test?

3

Welcome back to the forum @valabojubharath

One set of the keys are nested in quote marks, the other set is not.

Happy coding

4

Thanks for the reply!

But I would like to point out that both are essentially the same and the second block with the quote marks should pass as well.

5

You can review how to create and use JS objects: https://www.w3schools.com/js/js_objects.asp

Always check your syntax by searching for docs and examples if you are in doubt.

1 Like
6

Hello!

I have the same issue. However, it doesn’t work as next example:

const profiles = [
  {
    id: 1,
    name: "Mark",
    title: "Frontend developer",
    bio: "I like to work with different frontend technologies and play video games.",
  },
];

I have only one error which I can’t pass:

2. Your profiles array should contain an object that includes all required properties: id, name, title, and bio.

Could someone help me, please?

7

Never mind, removing the “,” did the trick. But, oddly, there is no check for that.