React Video Component not updating when state changes

Question

I am trying to create a video player and I am stuck on this problem. In React, I have a page that gets the JSON from the server, then creates simple hrefs to change the video. The HTML5 player is brought in as a component with the prop of the object that gives the controls, src, description, etc. I put console logs to see if the information is getting passed, when the page reloads the state is correct, however, the video is not reflecting the state change.

I have exhausted all avenues. Any help would be appreciated.

const FS5VideoPlayer = () => {
  //Generate the playList
  const [isLoaded, SetIsLoaded] = useState(false);
  const [error, SetError] = useState(null);
  const [items, SetItems] = useState([]);
  const [nowPlaying, SetNowPlaying] = useState("");


  // Needs to work on variable declaration and not hardcoded
  const url = 'http://localhost:8080/videos/videolist'

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(json => {
        SetItems(json.videos);
        SetIsLoaded(true);
      })
      .catch(error => {
        SetError(error);
        SetIsLoaded(true);
      });

  }, []);
  if (error) {
    return <div>{error}</div>;
  }
  else if (!isLoaded) {
    return <div>Loading...</div>;
  }
  else {
    console.log(items[0].src);
    console.log("loading-nowPlaying", nowPlaying);
    if (nowPlaying === "") {
      SetNowPlaying(items[0]);
      console.log("Initial Load")
    }
    else {
      console.log("all good")
    }
  }

  function playVideo(videoObj) {
    console.log("videoObj", videoObj);
    SetNowPlaying(items[videoObj]);

    console.log("Now Playing", nowPlaying);

  }
  return (
    <>
      <div className="container-fluid">
        <HTML5Video
          videoInfo={nowPlaying}
        />
        <div>
          {
            // Map Video List 
            //

            items.map((videos, index) => {
              return (
                <div key={videos.id}>
                  <a href="#" onClick={() => playVideo(index)}>
                    {videos.title}
                  </a>
                </div>
              )
            }
            )}


        </div>
      </div>
    </>
  );
};

The HTML5 Player

const HTML5Video = ({ videoInfo }) => {
  const urlPath = () => {
    const hostname = window.location.hostname;
    const port = window.location.port;
    const myDocker = `http://${hostname}:${port}`
    const myDev = "http://localhost:8080";
    if (port === "3000") {
      return myDev;
    } else {
      return myDocker;
    }
  }
  console.log("HTML5", videoInfo);
  /**
   * Adding logic for chromecast button
   * Currently throwing a lot of erros. Revisit
   * https://stackoverflow.com/questions/44999267/how-to-chromecast-enable-a-website/49089116
   */


  return (
    <div>

      <h2>HTMLFiveVideo</h2>
      <video width="720" controls={videoInfo.defaultControls}>
        <source src={`${urlPath()}/videos/videofiles?videosrc=${videoInfo.src}`} />
        {console.log(urlPath())}
      </video>


    </div>
  );
};

export default HTML5Video;

Answer 1

I faced a similar problem. My solution was to set a timeout before adding new value to the state and clear it before.

Probably the problem is because setState() is usually asynchronous, which means that at the time you wanna see changes in the state, it's not updated yet.

const watchNewVideo = (video) => {
setTopVideo(null);
setTimeout(() => {
  setTopVideo(video);
}, 10);

};