CODEWITHSUNDEEP
javascriptreactjs
Inception_K
Inception_K

Reputation: 145

How to convert normal script to use in reactjs function component

I am not well aware with reactjs. I am converting a script tag in reactjs to use inside the function components. Below is the script tag code

    <script>

        function videoslider(links){
            document.querySelector(".slider").src = links;
        }

    </script>

when I tried to use this in function component as given below

        videoslider = (links) => {
            document.querySelector(".slider").src = links;
        }

    or
   
    const videoslider = links => {
        document.querySelector(".slider").src = links;
}
return (
    <div class="container">
        <video src="1.mp4" class="slider" autoplay loop muted controls></video>

        <ul>
            <li onclick="videoslider('1.mp4')"><video src="1.mp4"></video></li>
            <li onclick="videoslider('2.mp4')"><video src="2.mp4"></video></li>
            <li onclick="videoslider('3.mp4')"><video src="3.mp4"></video></li>
            <li onclick="videoslider('4.mp4')"><video src="4.mp4"></video></li>
            <li onclick="videoslider('5.mp4')"><video src="5.mp4"></video></li>
        </ul>
    </div>
)

then it's gave me the error that videoslider is not declared. Where I did wrong. Any suggestion much appreciate. thanks

Upvotes: 0

Views: 181

Answers (1)

Danial
Danial

Reputation: 1643

You can use useState hook to solve this problem. In your case for example:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [sliderSrc , setSliderSrc] = useState("");
  const videoslider = (links) => {
    setSliderSrc(links);
  };

  return (
    <div class="container">
      <video
        src="1.mp4"
        className="slider"
        src={sliderSrc}
        autoplay
        loop
        muted
        controls
      ></video>

      <ul>
      <li onClick={()=>videoslider('1.mp4')}>
          <video src="1.mp4"></video>
        </li>
        <li onClick={()=>videoslider('2.mp4')}>
          <video src="2.mp4"></video>
        </li>
        <li onClick={()=>videoslider('3.mp4')}>
          <video src="3.mp4"></video>
        </li>
        <li onClick={()=>videoslider('4.mp4')}>
          <video src="4.mp4"></video>
        </li>
        <li onClick={()=>videoslider('5.mp4')}>
          <video src="5.mp4"></video>
        </li>
      </ul>
    </div>
  );
}

Upvotes: 1

Related Questions