---
id: 69e8b295388ebbd517692bc3
title: Step 25
challengeType: 0
dashedName: step-25
---

# --description--

Remember from JSX that curly braces let you embed any JavaScript expression directly inside JSX. This is how you display dynamic data from props. You do the same in TSX.

The card header still shows hardcoded values. Replace the text `98` inside `card-rating` with `player.overallRating`, and replace `ST` inside `card-position` with `player.position`.

# --hints--

You should replace the hardcoded `98` with `player.overallRating` in `.card-rating`.

```js
assert.match(__helpers.removeJSComments(code), /\{player\.overallRating\}/);
```

You should replace the hardcoded `ST` with `player.position` in `.card-position`.

```js
assert.match(__helpers.removeJSComments(code), /\{player\.position\}/);
```

# --seed--

## --seed-contents--

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Football Player Card Builder</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.tsx"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { FootballPlayerCard } from './index.tsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<FootballPlayerCard />);
    </script>
  </body>
</html>
```

```css
html,
body {
  min-height: 100%;
  font-family: "Lato", system-ui, sans-serif;
  background-color: #0a0a23;
}

.page {
  min-height: 100vh;
  background-color: #0a0a23;
}

.header {
  background-color: #1b1b32;
  border-bottom: 3px solid #f1be32;
}

.header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px;
}

.header-title {
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #f1be32;
}

.header-subtitle {
  font-size: 12px;
  color: #99c9ff;
  margin-top: 2px;
}

.main {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 1024px) {
  .layout {
    grid-template-columns: 1fr 1fr;
  }
}

.form-panel {
  background-color: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-section-title {
  font-size: 17px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1f2937;
  margin-bottom: 8px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group select {
  padding: 7px 12px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-panel > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
}

.input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.25);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.preview-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

@media (min-width: 1024px) {
  .preview-panel {
    position: sticky;
    top: 32px;
  }
}

.tier-elite { 
  --accent: #dbb8ff; 
}

.tier-gold   { 
  --accent: #f1be32; 
}

.tier-silver { 
  --accent: #99c9ff; 
}

.tier-bronze { 
  --accent: #acd157; 
}

.preview-box {
  width: 100%;
  background-color: #1b1b32;
  border-radius: 12px;
  border: 2px solid var(--accent);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preview-label {
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #dfdfe2;
}

.preview-hint {
  font-size: 11px;
  color: #99c9ff;
  margin-top: 2px;
}

.card-wrapper {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  background-color: var(--accent);
  padding: 3px;
  display: inline-block;
}

.card {
  clip-path: polygon(8% 0%, 92% 0%, 100% 5%, 100% 91%, 98% 96%, 93% 99%, 87% 100%, 13% 100%, 7% 99%, 2% 96%, 0% 91%, 0% 5%);
  width: 260px;
  background-color: #0a0a23;
  font-family: "Lato", sans-serif;
  overflow: hidden;
}

.card-header {
  background-color: #1b1b32;
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-rating {
  font-size: 48px;
  font-weight: 900;
  color: var(--accent);
  line-height: 1;
}

.card-position {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.card-header-right {
  text-align: right;
}

.card-tier-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #0a0a23;
  background-color: var(--accent);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}

.card-club {
  font-size: 13px;
  font-weight: 700;
  color: #dfdfe2;
}

.card-image-wrap {
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #1b1b32;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.card-name-strip {
  background-color: var(--accent);
  padding: 8px 20px;
  text-align: center;
}

.card-name {
  font-size: 18px;
  font-weight: 900;
  color: #0a0a23;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.card-stats {
  background-color: #dfdfe2;
  padding: 12px 20px 20px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 12px;
}

.stat-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-col:last-child {
  padding-left: 28px;
}

.stat-divider {
  background-color: #d0d0d5;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-value {
  font-size: 15px;
  font-weight: 900;
  color: #0a0a23;
  min-width: 24px;
  text-align: right;
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: #1b1b32;
  letter-spacing: 0.08em;
}
```

```tsx
const { useState } = React;

interface PlayerData {
  name: string;
  overallRating: number;
  position: string;
  club: string;
  imageUrl: string;
  pac: number;
  sho: number;
  pas: number;
  dri: number;
  def: number;
  phy: number;
}

export function getPlayerTier(rating: number): string {
  if (rating >= 92) return 'elite';
  if (rating >= 85) return 'gold';
  if (rating >= 75) return 'silver';
  return 'bronze';
}

export const PlayerCard = ({ player }: { player: PlayerData }) => {
  return (
    <div className={`card-wrapper tier-${getPlayerTier(player.overallRating)}`}>
      <div className="card">
        <div className="card-header">
          <div>
            --fcc-editable-region--
            <div className="card-rating">98</div>
            <div className="card-position">ST</div>
            --fcc-editable-region--
          </div>
          <div className="card-header-right">
            <div className="card-tier-badge">GOLD</div>
            <div className="card-club">Santos FC</div>
          </div>
        </div>
        <div className="card-image-wrap">
          <img src="https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/pele.jpg" alt="Edson Arantes do Nascimento (Pele) headshot" className="card-image" />
        </div>
        <div className="card-name-strip">
          <span className="card-name">PELE</span>
        </div>
        <div className="card-stats">
          <div className="stat-col">
            <div className="stat-row">
              <span className="stat-value">97</span>
              <span className="stat-label">PAC</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">98</span>
              <span className="stat-label">SHO</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">83</span>
              <span className="stat-label">PAS</span>
            </div>
          </div>
          <div className="stat-divider" />
          <div className="stat-col">
            <div className="stat-row">
              <span className="stat-value">99</span>
              <span className="stat-label">DRI</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">41</span>
              <span className="stat-label">DEF</span>
            </div>
            <div className="stat-row">
              <span className="stat-value">75</span>
              <span className="stat-label">PHY</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export const FootballPlayerCard = () => {
  return <PlayerCard player={{ name: 'PELE', overallRating: 98, position: 'ST', club: 'Santos FC', imageUrl: 'https://cdn.freecodecamp.org/curriculum/typescript/tsx-workshop/pele.jpg', pac: 97, sho: 98, pas: 83, dri: 99, def: 41, phy: 75 }} />;
};
```
