Build a Reusable Profile Card Component - Step 12

JavaScript
1

Tell us what’s happening:

I’ve been working on this challenge, but I think I’m doing it wrong. I’d appreciate your help…

Your code so far

 



/* 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."
    },


    {
      id: 2,
      name: "Tiffany",
      title: "Engineering manager",
      bio: "I have worked in tech for 15 years and love to help people grow in this industry."
    },

    
    {
      id: 3,
      name: "Doug",
      title: "Backend developer",
      bio: "I have been a software developer for over 20 years and I love working with Go and Rust."
    }
  ];

  return (
    <div className="cards">
      {profiles.map(profile => (
        <Card
          key={profile.id}
          name={profile.name}
          title={profile.title}
          bio={profile.bio}
        />
      ))}
    </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 12

https://www.freecodecamp.org/learn/full-stack-developer/workshop-reusable-profile-card-component/step-12

2

Your code passes the test for me.

You can try to reset the step and past this code back in from here.

3

I appreciate it. The code worked after I reset the steps and pasted it again

1 Like