Can I do typescript props validation for a component wrapped inside a HOC?

Question

I am writing my components with a React HOC but it is giving error while using typescript for validating props. the error is as follow

Type '{ type: string; imgUrl: any; vidUrl: any; }' is not assignable to type 'IntrinsicAttributes & Pick & { children?: ReactNode;}'.

what my components look like (example):

type Props = {
type: string;
imgUrl: any;
vidUrl: any;
}
const Component = ({type,imgUrl,vidUrl}:Props)=> (
<div>.....
.....
</div>
)
export defualt withTranslation('common')(Component);

score 0 · Answer 1 · answered Nov 15 '19 at 06:11

0

You have to provide the correct type for component.

import { withTranslation, WithTranslation } from 'react-i18next';
import React from "react";
type Props = {
  type: string;
  imgUrl: any;
  vidUrl: any;
  }
  const Component: React.FC<Props & WithTranslation> = ({type,imgUrl,vidUrl})=> (
  <div>.....
  .....
  </div>
  )
  const withTranslationComponent = withTranslation('common')(Component);
  export default withTranslationComponent;

answered Nov 15 '19 at 06:11

MjZac

3,476
1
17
28

oh, so I have to combine my types with the HOC's types. Mine is next-i18n-next, so I'll try it out. Thanks! – Gulshan Zaman Nov 15 '19 at 12:53
As an update, I'd like to add that it's nice to use the useTranslation hook in functional components. – Gulshan Zaman Dec 16 '19 at 12:30

Can I do typescript props validation for a component wrapped inside a HOC?

1 Answers1