ContextQMD
Back to Freecodecamp

Step 9

curriculum/challenges/english/blocks/workshop-reusable-profile-card-component/68778af56eb5d980a4e2daed.md

latest2.8 KB
Original Source

--description--

Instead of setting the props for each individual Card component, you should create an array of profile data and use that data to render the Card components dynamically.

Begin by creating a profiles array inside the App component.

Add one object to the array for Mark, with the following values:

  • id: 1
  • name: "Mark"
  • title: "Front-End developer"
  • bio: "I like to work with different front-end technologies and play video games."

--hints--

You should define a profiles array inside the App component.

js
assert.match(code, /(const|let)\s+profiles\s*=\s*\[/);

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

js
assert.match(
  code,
  /(const|let)\s+profiles\s*=\s*\[\s*{[^}]*id\s*:\s*\d+[^}]*name\s*:\s*["'`][^"'`]+["'`][^}]*title\s*:\s*["'`][^"'`]+["'`][^}]*bio\s*:\s*["'`][^"'`]+["'`][^}]*}\s*\]/s);

--seed--

--seed-contents--

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>
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;
  }
}
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() {
  --fcc-editable-region--
     
  --fcc-editable-region--
  return (
    <div className="flex-container"></div>
  );
}