Passing Astro components to React components
In an Astro site page I wanted to add some bit of interactivity, and chose React.
I created the component, and inside it I had a pro
state variable that was true
or false
and showed different things based on this state:
import { useState } from 'react'
export default function TabBar() {
const [pro, setPro] = useState(false)
return (
<div>
{pro ? <p>pro</p> : <p>free</p>}
</div>
)
}
and I used it like this:
<TabBar client:load />
(client:load
otherwise it’s server-rendered at build time and not interactive).
So far so good.
But I wanted to pass multiple Astro components to this, so here’s what I did:
<TabBar client:load>
<div slot='free'>
<Free />
</div>
<div class='pt-2 mb-20' slot='pro'>PRO</div>
</TabBar>
Inside the React component, those slots are available through {props.pro}
and {props.free}
.
import { useState } from 'react'
export default function TabBar(props) {
const [pro, setPro] = useState(false)
return (
<div>
{pro ? props.pro : props.free}
</div>
)
}
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025