React: Execute a Function as many times as it is called

user_14483697 0
Viewed 59

I'm trying to give an image a addEventListener click listener, but it happens only once by itself when the localhost refreshes and nothing happens after I try to click the image.

I added window.onload so that the JS executes after the DOM has been loaded, I have tried this in a separate JS file also but same thing happens.

The react code and javascript:

// React and all other imports

export default function Women() {
    
    //All the image variables in an array
    var images = [b1, b10, b11, b4, b5, b6, b7, b8, b9, b2 , b3, b12];

    window.onload = function() {
      var firstWomen = document.querySelector(".women-product-image").firstChild;

      firstWomen.addEventListener("click", 
       console.log("click successful")
     )
   }

    return (
        <div>
           {images.map(image =>
            <div className="women-product-card" >
                <div className="women-product-image">
                    <img src={image} alt="product-image" width="200px" />
                </div>
                 <div  className="women-product-detail">
                    <h5>Lorem Ipsum</h5>
                    <p className="women-product-price" >&#x20B9;2,999</p>
                    
                    <button>Add to Cart</button>
                    <img src={star} width="20px" className="women-star-fav" />
                </div>
                
            </div>
            )}
      </div>
    )
}

When I save this and the localhost refreshes it gives click successful by itself in the Developer Tools console and when I try to click the first image nothing happens.

I want my first image to have a permanent eventListener so that the user clicks it how many times it gives the result everytime.

Thankyou in Advance.

jsx reactjs javascript
2 Answers

you can add click to image directly.

// React and all other imports

export default function Women() {
    
    //All the image variables in an array
    const images = [b1, b10, b11, b4, b5, b6, b7, b8, b9, b2 , b3, b12];
    const onImageClick = () => {
      alert('Image clicked')
    }

    return (
        <div>
           {images.map((image, index) =>
            <div className="women-product-card" >
                <div className="women-product-image">
                    <img src={image} alt="product-image" width="200px" onClick={index === 0 ? onImageClick : null} />
                </div>
                 <div  className="women-product-detail">
                    <h5>Lorem Ipsum</h5>
                    <p className="women-product-price" >&#x20B9;2,999</p>
                    
                    <button>Add to Cart</button>
                    <img src={star} width="20px" className="women-star-fav" />
                </div>
                
            </div>
            )}
      </div>
    )
}
user_65166990

You would want to add an onClick prop to the div with the women-product-image class. This way the onClick callback would always be available. In order to add the prop to the first one you can use the index returning from the map.
So something like:

{images.map((image, index) =>
<div className="women-product-card" onClick={index === 0 ? () => console.log('clicked!') :  null}>
.... // the rest of your code
</div>

This can be achieved a bit more elegantly but the idea would probably be the same or similiar

user_57512510
Related