Build a Reusable Profile Card Component - Step 11

JavaScript
1

Tell us what’s happening:

the instructions ask to add a prop of key to the Card component.
but after searching, i found out that key is not a prop and it should’t be added to the Card component.

it’s asigned like an argument in the render expression like :
<Card key={profile.id}/> and React internaly use it as key, just like it would for other jsx tags.

i did add the key to the rendering expression, but no pass is allowed.

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() {
  const profiles = [
    {
      id: 1,
      name: "Mark",
      title: "Frontend developer",
      bio: "I like to work with different frontend technologies and play video games."
    }
  ];
  return (
    <div className="flex-container">

{/* User Editable Region */}

      {profiles.map((profile) => (
        <Card
          name = {profile.name}
          title = {profile.title}
          bio = {profile.bio}
          key = {profile.id}
        />
      ))}

{/* User Editable Region */}

    </div>
  );
}

Your browser information:

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

Challenge Information:

Build a Reusable Profile Card Component - Step 11

2

this is the syntax you are asked to write in this step

confront with the example:

    <Card
      key={fruit.id}
      name={fruit.name}
      color={fruit.color}
    />

do you need additional clarifications on this?

3

My code is what you suggested in addition to the other props.

You mean i should only pass key prop and remove the others?

Because it say add it, not remove the others and add it.

Screenshot 2026-02-05 131218
Screenshot 2026-02-05 1312181115×578 49 KB

4

I am confused then, I understood that you had understood that

this is not the syntax wanted in this step

I showed you the example present in the step, that is the synax expected

did you try removing the spaces so that your syntax matches the one in the example more precisely?

5

That was it.
But it’s not a problem in a normal editor environment.

6

you can report it as a bug if you want

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.