The expected type comes from property 'src' which is declared here on type 'DetailedH-CodePudding

I am using react with typescript. In my project, I am using forwardRef on my video tag, Here I am getting an error on a source tag of the video saying:

Type 'PropsWithChildren' is not assignable to type 'string | undefined'. Type 'PropsWithChildren' is not assignable to type 'string'

Here is my code:

type VideoType = {
    videoSource: string
}

const Player: ForwardRefRenderFunction<HTMLVideoElement, VideoType> = (videoSource, ref) => {
  return <video className='player' ref={ref}>
  <source src={videoSource} />
</video>;
};

export default forwardRef(Player);

CodePudding user response：

Nice job on the types! You just need to destructure videoSource in your props:

TS Playground

import {default as React, forwardRef} from 'react';

type VideoType = {
  videoSource: string;
};

const Player = forwardRef<HTMLVideoElement, VideoType>(({videoSource}, ref) => (
  <video className="player" {...{ref}}>
    <source src={videoSource} />
  </video>
));

export default Player;