how can i convert an html/css/js website's Javascript into a react website?

Question

I wanted to move this pretty small Html/Css/Js website into a React website, I'm fairly new at web development but I thought it'd be easy but i ran into a problem of not being able to just copy the JavaScript into the React JSX.

How can I solve this problem?

the codepen for the thing I want to put in a react app is : https://codepen.io/aybukeceylan/pen/RwrRPoO

Thanks for help !

import React from "react";
import "../css/HeroSection.css";
import Photo1 from "../assets/photo_coursel1.webp";
import Photo2 from "../assets/photo_coursel2.webp";
import Photo3 from "../assets/photo_coursel3.webp";

function Home() {
  return (
    <>
      <div className="container">
        <input type="radio" name="slider" id="item-1" checked />
        <input type="radio" name="slider" id="item-2" />
        <input type="radio" name="slider" id="item-3" />
        <div className="cards">
          <div className="card" for="item-1" id="song-1">
            <img src={Photo1} alt="song" />
          </div>
          <div className="card" for="item-2" id="song-2">
            <img src={Photo2} alt="song" />
          </div>
          <div className="card" for="item-3" id="song-3">
            <img src={Photo3} alt="song" />
          </div>
        </div>
        <div className="player">
          <div className="upper-part">
            <div className="play-icon">
              <svg
                width="20"
                height="20"
                fill="#2992dc"
                stroke="#2992dc"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                className="feather feather-play"
                viewBox="0 0 24 24"
              >
                <defs />
                <path d="M5 3l14 9-14 9V3z" />
              </svg>
            </div>
            <div className="info-area" id="test">
              <label className="song-info" id="song-info-1">
                <div className="title">Bunker</div>
                <div className="sub-line">
                  <div className="subtitle">Balthazar</div>
                  <div className="time">4.05</div>
                </div>
              </label>
              <label className="song-info" id="song-info-2">
                <div className="title">Words Remain</div>
                <div className="sub-line">
                  <div className="subtitle">Moderator</div>
                  <div className="time">4.05</div>
                </div>
              </label>
              <label className="song-info" id="song-info-3">
                <div className="title">Falling Out</div>
                <div className="sub-line">
                  <div className="subtitle">Otzeki</div>
                  <div className="time">4.05</div>
                </div>
              </label>
            </div>
          </div>{" "}
          <div className="progress-bar">
            <span className="progress"></span>
          </div>
        </div>
      </div>
    </>
  );
}

export default Home;

Answer 1

I don't know jQuery, but this is how I'd do it:

write the onChange function as handleOnChange = () => {...code stuff} inside of Home() but above return(). Then I would wrap the radio inputs in a <form> tag like so:

<form onChange=(this.handleOnChange)>
    <input type="radio" name="slider" id="item-1" checked />
    <input type="radio" name="slider" id="item-2" />
    <input type="radio" name="slider" id="item-3" />
</form> 

Also, you don't need to wrap the container in a React fragment since everything is already wrapped in a container. Fragments are for when you want to return multiple elements that are not wrapped in a parent element.