Is there anyone that could assist me in converting this code from Jquery into a reactjs? I tried a lot, but I kept getting errors.

I had never used jquery before, so I couldn't understand it.

In simply, this code how its work If I click "Laptop" text, it will display all 3 images for div "tab1c" and hidden the other div

      <div id="tab1c" >
        <img src="/images/img1.png" alt=""/>
        <img src="/images/img2.png" alt=""/>
        <img src="/images/img3.png" alt=""/>
      </div>
      <div id="tab2c" >
         <img src="/images/img4.png" alt=""/>
         <img src="/images/img5.png" alt="" />
         <img src="/images/img6.png" alt="" />
      </div>
      ....
      ....

and when I press "Phone" this will disable tab1c and show tab2c. like this

      <div id="tab1c" >
        <img src="/images/img1.png" alt=""/>
        <img src="/images/img2.png" alt=""/>
        <img src="/images/img3.png" alt=""/>
      </div>
      <div id="tab2c" >
         <img src="/images/img4.png" alt=""/>
         <img src="/images/img5.png" alt="" />
         <img src="/images/img6.png" alt="" />
      </div>

showing images depend on Clicked text

jquery:

     <section >
       <div >
          <h4 id="tab1">Laptop</h4>
          <h4 id="tab2">Phone</h4>
          <h4 id="tab3">Ipad</h4>
       </div>
       <div id="tab1c" >
          <img src="/images/img1.png" alt=""/>
          <img src="/images/img2.png" alt=""/>
           <img src="/images/img3.png" alt=""/>
       </div>
       <div id="tab2c" >
          <img src="/images/img4.png" alt=""/>
          <img src="/images/img5.png" alt="" />
          <img src="/images/img6.png" alt="" />
        </div>
        <div id="tab3c" >
          <img src="/images/img7.png" alt=""/>
          <img src="/images/img8.png" alt="" />
          <img src="/images/img39.png" alt="" />
         </div>
       </section>


        <script>
        $(document).ready(function(){
            $(".title h4").on('click' function()
        {
            $(this).addClass("active");
            // get id
            var tab = $(this).attr("id");
            console.log(tab);

            if($(this).hasClass("active")){
                $(this).addclass("active");
                $(".title h4").not(this).removeClass("active");
                $(".img_group").removeClass("show");
                $("#"  tab   "c").addClass("show");
            }}
        );
        })
    </script>

CodePudding user response：

If you want the above code converted to react.js - I would suggest something like this.

import React, { useState } from 'react';

function App() {
  const [activeTab, setActiveTab] = useState('tab1');

  const handleTabClick = (tab) => {
    setActiveTab(tab);
  };

  return (
    <section className="hero_sec">
      <div className="title">
        <h4 id="tab1" onClick={() => handleTabClick('tab1')} className={activeTab === 'tab1' ? 'active' : ''}>
          Laptop
        </h4>
        <h4 id="tab2" onClick={() => handleTabClick('tab2')} className={activeTab === 'tab2' ? 'active' : ''}>
          Phone
        </h4>
        <h4 id="tab3" onClick={() => handleTabClick('tab3')} className={activeTab === 'tab3' ? 'active' : ''}>
          Ipad
        </h4>
      </div>
      <div id="tab1c" className={`img_group ${activeTab === 'tab1' ? 'show' : ''}`}>
        <img src="/images/img1.png" alt="" />
        <img src="/images/img2.png" alt="" />
        <img src="/images/img3.png" alt="" />
      </div>
      <div id="tab2c" className={`img_group ${activeTab === 'tab2' ? 'show' : ''}`}>
        <img src="/images/img4.png" alt="" />
        <img src="/images/img5.png" alt="" />
        <img src="/images/img6.png" alt="" />
      </div>
      <div id="tab3c" className={`img_group ${activeTab === 'tab3' ? 'show' : ''}`}>
        <img src="/images/img7.png" alt="" />
        <img src="/images/img8.png" alt="" />
        <img src="/images/img39.png" alt="" />
      </div>
    </section>
  );
}

export default App;

CodePudding user response：

You don't have to do it as jQuery does.
React can do it simpler.

export function Images() {
  const [images, setImages] = useState(["img1.png","img2.png","img3.png"]);
  return (
    <section className="hero_sec" >
      <div className="title" >
        <h4 onClick={ e=>setImages(["img1.png","img2.png","img3.png"]) } > Laptop </h4>
        <h4 onClick={ e=>setImages(["img4.png","img5.png","img6.png"]) } > Phone </h4>
        <h4 onClick={ e=>setImages(["img7.png","img8.png","img39.png"]) } > Ipad </h4>
      </div>
      <div className="img_group" >
        {images.map(src=><img key={src} src={`/images/${src}`} alt="" />)}
    </div>
    </section>
  );
};