How to pass data correctly into React / NextJS Video component?

Question

I have a React based video player that is setup like this:

<ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100" url='videos/330163_SF.mp4' poster="images/330163_C2B_Clean.png"></ReactPlayer>

This static URL is to be replaced with a dynamic URL coming from a data sheet:

const { videoID, videolink, id, thumb } = videoData

When put in a simple text bracket like this: {videolink} , the videolink is pulled and displayed correctly on the page:

videos/general/100004_SF.mp4

However, inserting and passing the data to the video component in this way does not work

 <ReactPlayer playing={true} controls={true} muted={true} loop={true} width="100" height="100" url={'videolink'} poster="images/330163_C2B_Clean.png"> </ReactPlayer>

Where is my mistake?

Answer 1

You are passing a string as a prop not a variable when you inclose it in quotes

<ReactPlayer url={'videolink'} //This will always pass a string 
<ReactPlayer url={'videos/general/100004_SF.mp4'} //This would work for example
<ReactPlayer url={videolink} //This is the correct solution as eit t is now passing the variable.