Set a div container id after onClick triggers component

Issue

I'd like to know the best approach to ensuring that I'm setting an id: "editorial-slider" when the triggerEdSlider() function is clicked? This is what I have so far:

const [containerId, setContainerId] = useState('.slider'); // className that I want to assign an id after triggerEdSlide() is called.

    function triggerEdSlide(){
        setContainerId('editorial-slider');
        initializeSlider(`./images/main/`);
        return(
            <>
                <main className="slider-container" data-barba-namespace="home-section">
                    <div className="slider" id={containerId}>
                        <div className="slider-inner" id="slider-inner1">
                            <div className="item">
                                <div className="img" id="bk1"></div>
                            </div>
                            <div className="item">
                                <div className="img" id="bk2"></div>
                            </div>
                            <div className="item">
                                <div className="img" id="bk3"></div>
                            </div>
                            <div className="item">
                                <div className="img" id="bk4"></div>
                            </div>
                            <div className="item">
                                <div className="img" id="bk5"></div>
                            </div>
                            <div className="item">
                                <div className="img" id="bk6"></div>
                            </div>
                            <div className="item">
                                <div className="img" id="bk7"></div>
                            </div>
                        </div>
                    </div>
                </main>
            </>
        )
    }

Solution

If you want to set an id when an event happens (onClick) then you can do it like this: I've replaced your string state with a boolean value and then used a ternary operator to set the id.

const [triggerIsClicked, setTriggerIsClicked] = useState(false);

function triggerEdSlide(){
    setTriggerIsClicked(true);
    initializeSlider(`./images/main/`);
    return(
        <>
            <main className="slider-container" data-barba-namespace="home-section">
                <div className="slider" id={triggerIsClicked ? 'editorial-slider' : ''}>
                    <div className="slider-inner" id="slider-inner1">
                        <div className="item">
                            <div className="img" id="bk1"></div>
                        </div>
                        <div className="item">
                            <div className="img" id="bk2"></div>
                        </div>
                        <div className="item">
                            <div className="img" id="bk3"></div>
                        </div>
                        <div className="item">
                            <div className="img" id="bk4"></div>
                        </div>
                        <div className="item">
                            <div className="img" id="bk5"></div>
                        </div>
                        <div className="item">
                            <div className="img" id="bk6"></div>
                        </div>
                        <div className="item">
                            <div className="img" id="bk7"></div>
                        </div>
                    </div>
                </div>
            </main>
        </>
    )
}

If you need the slider to lose that id when you click again you can change the state update to look like this

function triggerSlideId() {
    setTriggerIsClicked(prevState => !prevState);
}

Answered By - Max Taylor-Hayden