I'm using react-player component for this.
I have file 1 where I'm storing some data as an array, including a local video.
import videoSample from "../assets/videos/sample-video.mov";
export const Data = {
ProjectList: [
{
title: "My title",
desc: "Some description",
videoUrl: { videoSample },
sourceUrl: "https:// ... ",
},
],
};
File 2 takes the array and maps each item to a React component called ProjectDetail
.
function MappingFunction() {
return (
<>
{Data.ProjectList.map((project, index) => (
<ProjectDetail key={index} {...project} />
))}
</>
);
}
Finally, this is file 3 which contains ProjectDetail
. It takes the array item as props. videoUrl
is passed to the ReactPlayer component.
export default function ProjectDetail(props) {
return (
<>
<div>
<ReactPlayer
url={props.videoUrl} // does not work!
width="500px"
/>
</div>
<div>
<h2>{props.title}</h2> // works
<p>{props.desc}</p> // works
<button
onClick={() => { window.open(props.sourceUrl, "_blank"); }} // works
> Click to see more
</button>
</div>
</>
);
}
title
, desc
and sourceUrl
are working fine, but I don't understand videoUrl
doesn't. I tried looking up an answer but was unsuccessful.
If I import videoSample
in file 3 directly, it works fine, but not when passed as a prop from outside. What am I missing?
Found my mistake. All I needed to do was removing the curly brackets.
videoUrl: { videoSample }
-> videoUrl: videoSample