How to receive any element as a ReactChild in TypeScript file?

user_15142650 0
Viewed 391

I am using a library which has <Carousel> element I am trying to add some children to it like this.

                               <Carousel>
                                    <div>
                                        <img
                                            style={{ width: 350, height: 197, borderRadius: 10 }}
                                            src={
                                                'https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/05/salon-lockdown-1590854316.jpg'
                                            }
                                        ></img>
                                    </div>
                                </Carousel>

But It gives me an error that

Type 'Element' is not assignable to type '(ReactChild[] & (boolean | ReactChild | ReactFragment | ReactPortal | null)) | undefined'. Type 'ReactElement<any, any>' is not assignable to type 'ReactChild[] & ReactPortal'. Type 'ReactElement<any, any>' is missing the following properties from type 'ReactChild[]': length, pop, push, concat, and 28 more. TS2322

      144 |                             >
      145 |                                 <Carousel>
      146 |                                     <div>
          |                                     ^
      147 |                                         <img
      148 |                                             style={{ width: 350, height: 197, borderRadius: 10 }}
>     149 |                                             src={

How can I disable TypeScript checking for that element?

typescript reactjs
2 Answers

Look like <Carousel> accept a ReactFragment type.

Type 'Element' is not assignable to type '(ReactChild[] & (boolean | ReactChild | ReactFragment | ReactPortal | null)) | undefined'.

You would need to wrap it inside a ReactFragment like so:

<Carousel>
  <>
    <img
      style={{ width: 350, height: 197, borderRadius: 10 }}
      src={
        "https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/05/salon-lockdown-1590854316.jpg"
      }
    ></img>
  </>
</Carousel>;

OR:

<Carousel>
  <React.Fragment>
    <img
      style={{ width: 350, height: 197, borderRadius: 10 }}
      src={
        "https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/05/salon-lockdown-1590854316.jpg"
      }
    ></img>
  </React.Fragment>
</Carousel>;
user_51226150

Carousel accept a list of Element. So should pass an array of Element instead a Element

{[
  <div>
    <img
      style={{ width: 350, height: 197, borderRadius: 10 }}
      src={
        "https://resize.indiatvnews.com/en/resize/newbucket/1200_-/2020/05/salon-lockdown-1590854316.jpg"
      }
    ></img>
  </div>,
]}
user_61083900
Related