How to render the function inside addEventListener load in reactjs or nextjs?

Question

const Test = () => 
{
    const [ reload , setReload ] = useState('')
    useEffect(() => {
        console.log("useEffect Reloded");
        document.getElementById( "img" )!.addEventListener('load' , () => {
            console.log("img loaded")
        });
    },[reload])

    useEffect(() => {
        document.getElementById( "btn" )!.addEventListener('click' , function() {
            console.log("btn loaded");
            setReload(v4())
        });    
    }, [])

    return (
        <div>
            <img src={picTest.src} width={400} id="img" />
            <button id={"btn"}>reload</button>
        </div>
    );
};

export default Test;

I want "img loaded" to be printed twice:

1- Once when the photo is loaded 2- Second, when the user clicks on the btn button.

But it is not printed in any of these two cases Does anyone know the solution?

Answer 1

That is not how things are handled in React. Below is an example of how things are handled in React. I suggest you react the docs first.

const Test = () => 
{
    const [ reload , setReload ] = useState('')

    const imageLoad = () => {
      console.log("image loaded")
      // whatever you want to do here
    }

    const handleClick = () => {
      console.log("button clicked")
      // whatever you want to do here
    }

    return (
        <div>
            <img onLoad={imageLoad} src={picTest.src} width={400} id="img" />
            <button onClick={handleClick} id={"btn"}>reload</button>
        </div>
    );
};

export default Test;