How to load a video in ReactPlayer when clicking a div that is fetching data from JSON file?

Question

So I'm pretty much new in React/Web development and just can't figure it out regarding ReactPlayer.

I have a .JSON file with [ID, Question, URL] and I load the questions into divs. What I want is when I click the div(question) then the URL that is assigned to that question should load in the ReactPlayer..

This is how it looks so far:

import React, { useState } from "react";
import Questions from "../data/questions.json";
import style from "./Card.module.css";

import ReactPlayer from "react-player/youtube";

function Card() {
  const handleClick = (item) => {
    console.log(item);
  };

  return (
    <div>
      <div className={style.ViewContent}>

        <div className={style.mainCard}>
          {ListQuestions.map((ListItem, index) => {
            return (

              <div onClick={() => handleClick(ListItem.url)} key={index} className={style.Card}>

                <h3 className={style.Titel}>{ListItem.question}</h3>     
          
              </div>

            );
          })}
        </div>

        <div className={style.VideoPlayer}>
          <ReactPlayer url={handleClick.item} controls={true} />
        </div>

      </div>
    </div>
  );
}
export default Card;

I tested the click function and every time I click the question the console logs only the URL. But how can the ReactPlayer get that URL and play the video?

I'm sorry for the bad coding.. still learning :)

I tried adding onSubmit on the div box so when clicking the div it should submit/load the link to the ReactPlayer... but thinking logically and then interpreting it kind of does not work.

score 0 · Accepted Answer · answered Nov 13 '22 at 16:28

I figured it out :D

import React, { useState } from "react";
import Questions from "../data/questions.json";
import style from "./Card.module.css";

import ReactPlayer from "react-player";

function Card() {
 
  const [playUrl, setPlayUrl] = useState("");  ← here you could put the youtube link to show up when loading the page. 
  const [isPlaying, setIsPlaying] = useState(true);

  return (
    <div>
      <div className={style.ViewContent}>

        <div className={style.mainCard}>
          {ListQuestions.map((ListItem, index) => {
            return (

              <div onClick={() => setPlayUrl(ListItem.url)} key={index} className={style.Card}>

                <h3 className={style.Titel}>{ListItem.question}</h3>     
          
              </div>

            );
          })}
        </div>

        <div className={style.VideoPlayer}>
          <ReactPlayer url={playUrl} controls={true} playing={isPlaying} />
        </div>

      </div>
    </div>
  );
}
export default Card;

How to load a video in ReactPlayer when clicking a div that is fetching data from JSON file?

1 Answers1