How can you access multiple props.children with PReact

Question

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?

Answer 1

You could use a renderHeaderPrefix prop.

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.renderHeaderPrefix} <b>{props.cardTitle}</b>
            </div>
            <div class="card-body">
                <p class="card-text">
                    {props.children}
                </p>
            </div>
        </div>
    );
  }

index.astro

<Card cardTitle="Funfact" renderHeaderPrefix={<i class="fa-solid fa-ban-smoking"></i>}>    
    <FunFact />
</Card>

Answer 2

I have manged to get it working now by just handing the className itself through the prop.

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' }}>
                <i class={props.iconClass}></i><b>{props.cardTitle}</b>
            </div>
            <div class="card-body">
                <p class="card-text">
                    {props.children}
                </p>
            </div>
        </div>
    );
  }

<Card cardTitle="Funfact" iconClass="fa-solid fa-ban-smoking">    
    <FunFact />
</Card>