# Passing Astro components to React components

> Learn how to pass Astro components into a React island using named slots, then render them inside the component through props.pro and props.free.

Author: Flavio Copes | Published: 2023-10-30 | Canonical: https://flaviocopes.com/passing-astro-components-to-react-components/

In an [Astro](https://flaviocopes.com/astro-introduction/) site page I wanted to add some bit of interactivity, and chose [React](https://flaviocopes.com/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:

```javascript
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:

```javascript
<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:

```javascript
<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}`.

```javascript
import { useState } from 'react'

export default function TabBar(props) {
  const [pro, setPro] = useState(false)

	return (
    <div>
      {pro ? props.pro : props.free}
    </div>
  )
}
```