How to convert normal script to use in reactjs function component

Question

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

You really should read an introductory guide to React before you start trying to write stuff using it. Updating an attribute value when something is clicked on is really introductory level stuff. — Quentin
– Quentin, Commented Aug 30, 2021 at 17:33

Danial · Accepted Answer · 2021-08-30 17:40:42Z

1

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>
  );
}

edited Aug 30, 2021 at 17:40

answered Aug 30, 2021 at 17:27

Danial

1,6432 gold badges17 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Quentin Over a year ago

There's no reason to resort to a ref instead of state for this.

Danial Over a year ago

So what you suggest? @Quentin

Quentin Over a year ago

Using state. As I mentioned in my previous comment.

Danial Over a year ago

Review it please @Quentin

Collectives™ on Stack Overflow

How to convert normal script to use in reactjs function component

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related