How to make an onclick function in reactJS?

Question

I am using React JS and I want to add an on-click function to the list item, so when I click on it, the image should change in the Main class

This is the CategorySlider.js that I am using:

        import React from 'react';
        import img1 from "../../assets/img1.png";
        import img2 from "../../assets/img2.png";
        import img3 from "../../assets/img3.png";
        import img4 from "../../assets/img 4.png";
        import img5 from "../../assets/img 5.png";
        import img6 from "../../assets/img 6.png";
        import img7 from "../../assets/img 7.png";
        import img8 from "../../assets/img 8.png";
        import img9 from "../../assets/img 9.png";
        import "./Slider.css";
          
   

 function imgSlider(anything){
    document.querySelector('.Main').src=anything;
    }
    export default function CategorySlider() {
        return (
            <div className="container slider_container">
                <div className="row slider_row">
                    <div className="col-lg-6 Img_Description">
                        <h1 className="mav">Jute bag</h1>
                        <p className="mav_descp">Reprehenderit do veniam aliquip nisi dolore ea duis amet. Dodo fuyi occaecat incididunt in nulla dolore magna magna ea nisi. Laborum elit incididunt culpa sunt ad ea eiusmod velit anim in un sit consequat.</p>
                        <button className="btn btn-lg btn-primary more_info">Learn More</button>
                    </div>
                    <div className="col-lg-6 Main_Img">
                        <img src={img1} alt=" " className="Main"/>
                        <ul className="slider_list">
                        <li data-text="bag1" onClick={'imgSlider(img1)'}><img src={img1} alt=" "/></li>
                        <li data-text="bag2" onClick={'imgSlider(img2)'}><img src={img2} alt=" "/></li>
                        <li data-text="bag3" onClick={'imgSlider(img3)'}><img src={img3} alt=" "/></li>
                        <li data-text="bag4" onClick={'imgSlider(img4)'}><img src={img4}  alt=" "/></li>
                        <li data-text="bag5" onClick={'imgSlider(img5)'}><img src={img5}  alt=" "/></li>
                        <li data-text="bag6" onClick={'imgSlider(img6)'}><img src={img6}  alt=" "/></li>
                        <li data-text="bag7" onClick={'imgSlider(img7)'}><img src={img7}  alt=" "/></li>
                        <li data-text="bag8" onClick={'imgSlider(img8)'}><img src={img8}  alt=" "/></li>
                        <li data-text="bag9" onClick={'imgSlider(img9)'}><img src={img9}  alt=" "/></li>
                        </ul>
                    </div>
                </div>
            </div>
        )
}

Someone, please help me with this.

Answer 1

You are passing string on onClick. Pass a Function there. Like this:

 const imgSlider=(arg)=>{ } return( <div className="col-lg-6 Main_Img"> <img src={img1} alt=" " className="Main"/> <ul className="slider_list"> <li data-text="bag1" onClick={()=>imgSlider(img1)}><img src={img1} alt=" "/></li> </ul> </div>)

Answer 2

You can try this:

 function imgSlider(anything){
    document.querySelector('.Main').src={require('{anything}')}
    }

And anything should be the path of the image. (as your first comment, pass the function not the string)