I am using astro and created this Card component with PReact and Bootstrap
Card.jsx
import "bootstrap/dist/css/bootstrap.min.css";
export default function Card(props) {
return (
<div class="card" style={{ marginBottom: '20px' }}>
<div class="card-header" style={{ color: '#ACEB98' }}>
{props.children[0]} <b>{props.cardTitle}</b>
</div>
<div class="card-body">
<p class="card-text">
{props.children[1]}
</p>
</div>
</div>
);
}
On my astro page I use the component the following way
index.astro
<Card cardTitle="Funfact">
<i class="fa-solid fa-ban-smoking"></i>
<FunFact />
</Card>
But it seems you can’t access the different childs like it’s an array. Any suggetions?
2
Answers
I have manged to get it working now by just handing the className itself through the prop.
You could use a
renderHeaderPrefix
prop.Card.jsx
index.astro