Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How can you access multiple props.children with PReact

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search