Tell us what’s happening:
In step 8 of building a reusable card, my jsx works perfectly fine, I removed all three elements, but somehow it still says I must remove all of them. Where could the issue be here?
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 specialists = [ {id: "001-spe", name: "Mark", title: "Front-End developer", bio: "I like to work with different front-end technologies and play video games."}, {id: "002-spe", name: "Tiffany", title: "Engineering manager", bio: "I have worked in tech for 15 years and love to help people grow in this industry."}, {id: "003-spe", name: "Doug", title: "Back-End developer", bio: "I have been a software developer for over 20 years and I love working with Go and Rust."} ];
return (
{/* User Editable Region */}
<div className="flex-container">
{specialists.map((specialist) => (
<Card
key={specialist.id}
name={specialist.name}
title={specialist.title}
bio={specialist.bio}
/>
))}
</div>
{/* User Editable Region */}
);
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36 Edg/151.0.0.0
Challenge Information:
Build a Reusable Profile Card Component - Step 8