How can I turn this regular JavaScript function into something React.js can read

Question

I'm following along with a video to make a slideshow with JavaScript. I'm trying to figure out how I can implement this function from the video to React in create-react-app. I'm not too familiar with React but I think I shouldn't be trying to have "getElementsByClassname" in my function. What should I do to make this work?

I'm not sure where to call a function as you would in regular JavaScript, so I've been calling it with an onClick event. If anyone could help me with that as well, that would be amazing.

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import './Showcase.css';

class Showcase extends Component{
    constructor(props){
        super(props);
        this.initGallery = this.initGallery.bind(this);
    }
    initGallery(){
        let slideIndex, slides, dots, captionText;
        slideIndex = 0;
        slides = document.getElementsByClassName('imageHolder');
        slides[slideIndex].style.opacity = 1;
        console.log('hello');
    }
    render(){
        return(
            <section onClick={this.initGallery} id="Showcase"> {/*CONTAINS ALL SLIDING IMAGES*/}
                <div className="captionHolder">
                    <p className="captionText">Caption Text</p>
                </div>
                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/amos17_v2.jpg" alt="Amos-17 Mission"/>
                    <p className="captionText">Caption Text-01</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/v2_smallsatheader.png" alt="RideShare Missions"/>
                    <p className="captionText">Caption Text-02</p>
                </div>

                <div className="imageHolder"> {/*HOLDS ALL IMAGES HERE*/}
                    <img src="https://www.spacex.com/sites/spacex/files/nasa_astronauts3.jpg" alt="NASA Astronauts on crew Dragon"/>
                    <p className="captionText">Caption Text-03</p>
                </div>
            </section>
        );
    }
}

export default Showcase;

Not getting any errors, I checked that the function was being called successfully by adding a console.log whenever the click event triggered the function. I'm simply not getting the desired result which is to take the className and turn the opacity to 1 which will make an image appear since it is set to opacity 0 in the CSS file.

Answer 1

Instead of using document.getElementByClassName you can create an ref over an tag and use it like this.myRef = React.createRef(); in your constructor and binding it to the tag this is the way to do in react. You can refer here

React Refs and Dom