Pass astro props to react component

[harsh cairn]

Astro file

---
import Slider from "./ImageComparisonSlider";
const { one, two } = Astro.props;
---

<Slider one={one} two={two} client:load />

JSX file

import { ReactCompareSlider, ReactCompareSliderImage } from 'react-compare-slider';

const ImageComparisonSlider = ({ one, two }) => {
  //console.log("Inside TagSelect:", value, checked);

  return (
    <ReactCompareSlider
      itemOne={<ReactCompareSliderImage src={one} alt="Image one" />}
      itemTwo={<ReactCompareSliderImage src={two} alt="Image two" />}
    />
  );
};

export default ImageComparisonSlider;

In astro file i got error: Type '{ one: any; two: any; "client:load": true; }' is not assignable to type 'IntrinsicAttributes & { itemOne: any; itemTwo: any; }'.
Property 'one' does not exist on type 'IntrinsicAttributes & { itemOne: any; itemTwo: any; }'.

[novel onyx]

Hi @harsh cairn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

The error you're encountering is due to the mismatch between the props you're passing from the Astro component to the React component and the props that the React component is expecting.

In your Astro file, you're passing one and two as props to the Slider component:

<Slider one={one} two={two} client:load />

However, in your React component, it's expecting itemOne and itemTwo as props:

const ImageComparisonSlider = ({ itemOne, itemTwo }) => {
  return (
    <ReactCompareSlider
      itemOne={<ReactCompareSliderImage src={itemOne} alt="Image one" />}
      itemTwo={<ReactCompareSliderImage src={itemTwo} alt="Image two" />}
    />
  );
};

To resolve this, you should pass itemOne and itemTwo from the Astro component to match the props that the React component is expecting:

<Slider itemOne={one} itemTwo={two} client:load />

And then in your React component, you can use these props directly:

const ImageComparisonSlider = ({ itemOne, itemTwo }) => {
  return (
    <ReactCompareSlider
      itemOne={<ReactCompareSliderImage src={itemOne} alt="Image one" />}
      itemTwo={<ReactCompareSliderImage src={itemTwo} alt="Image two" />}
    />
  );
};

This should resolve the type error you're seeing.

For more information on passing props from Astro components to framework components, you can refer to the Astro documentation (https://docs.astro.build/en/guides/framework-components#passing-props-to-framework-components).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: