How to use onload in react?

Question

To run the imagesrore function onload I have to call <img src="image_7.jpg" className="hide" alt="image_7.jpg"/> image but actually there is no use of this line and if I remove this onload doesn't work and function is not called. So how can I call the imagestore() onload in react.

class PicturesList extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
          imagesarray: []
          };
          this.imagestore = this.imagestore.bind(this);
        }
        render() {
          return (
          <div>
            <div onLoad= {() => this.imagestore()}>
                <img src="image_7.jpg" className="hide" alt="image_7.jpg"/>
                // To run the imagesrore function onload I have to call this image but actually there is no use of this line and if I remove this onload doesn't work and function is not called
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
          );
        }
        imagestore()
        {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
        }

      }

what I want

class PicturesList extends React.Component {
            constructor(props) {
              super(props);
              this.state = {
              imagesarray: []
              };
              this.imagestore = this.imagestore.bind(this);
            }
            render() {
              return (
              <div>
                <div onLoad= {() => this.imagestore()}>

                    // but when I did this imagestore() function not called
                </div>
                <Gallery url={this.state.imagesarray}/>
              </div>
              );
            }
            imagestore()
            {
            const imgUrls=this.props.apikeys;
            const objarr = Object.values(imgUrls);
            this.setState({
                imagesarray: objarr
            });
            }

          }

try this once , componentDidMount() { window.addEventListener('load', this.imagestore); // or this.imagestore() } — Jayavel
– Jayavel, Commented Feb 22, 2019 at 5:16

Shubham Khatri · Accepted Answer · 2019-02-22 05:23:41Z

17

Instead of rendering the image which you dont want, you could simply load it in componentDidMount like

class PicturesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      imagesarray: []
      };
      this.imagestore = this.imagestore.bind(this);
    }

    componentDidMount() {
       const img = new Image();
        img.onload =() => {
          // image  has been loaded
          this.imagestore()
        };

        img.src = 'image_7.jpg';
    }
    render() {
       return (
          <div>
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
       );
    }
    imagestore() {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
    }

}

The above solution is just to call imageStore once an image is loaded. However if what you intend is to call imageStore when the component has fully loaded,just trigger this.imageStore() in componentDidMount

class PicturesList extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
      imagesarray: []
      };
      this.imagestore = this.imagestore.bind(this);
    }

    componentDidMount() {
        this.imagestore()
    }
    render() {
       return (
          <div>
            </div>
            <Gallery url={this.state.imagesarray}/>
          </div>
       );
    }
    imagestore() {
        const imgUrls=this.props.apikeys;
        const objarr = Object.values(imgUrls);
        this.setState({
            imagesarray: objarr
        });
    }

}

edited Feb 22, 2019 at 5:23

answered Feb 22, 2019 at 5:14

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ayush Srivastava Over a year ago

Have a look at github.com/ayush88089/react/tree/test in the index.html file... @Shubham

Shubham Khatri Over a year ago

@AyushSrivastava What do you want me to look at

Ayush Srivastava Over a year ago

I just uses <img src="image_7.jpg" className="hide" alt="image_7.jpg"/> to load the function imagestore() but If I don't use it the onload is not called why?? and how can call the onload function such that imagestore() function is called .. see what I want section @Shubham

Shubham Khatri Over a year ago

The way you have coded it, onLoad is called when the image actually loads and if there is not image onLoad won't be called. if however you intend to call imageStore when the component has loaded then you can simply call this.imageStore() in componentDidMount method directly

Ayush Srivastava Over a year ago

<Gallery url={this.state.imagesarray}/> this is connected to many component and the problem is I am loading the image_7.jpg unnecessory as I told u in above comment...

|

Sim · Accepted Answer · 2021-10-18 04:57:06Z

10

Use useEffect() in React. You would use it like this:

useEffect(()=>{

**INSERT CODE YOU WANT RUN ON LOAD HERE **

}, [])

Remember to import useEffect as well with import React, { useEffect } from 'react'

answered Oct 18, 2021 at 4:57

Sim

1091 silver badge3 bronze badges

1 Comment

Daniel Nordh Over a year ago

As a newbie working with making changes to way too advanced code for my skill level, I would just like to thank you for including that import-comment. I've looked through many questions describing useEffect and useState, but none actually mentions that little tidbit.

Andus · Accepted Answer · 2019-02-22 05:07:41Z

-1

Your onLoad function should be used at the <img> tag, not the <div/>.

answered Feb 22, 2019 at 5:07

Andus

1,73917 silver badges33 bronze badges

2 Comments

Ayush Srivastava Over a year ago

Please see my updated question:- actually I just want that onload imagestore() function called but to call it I have to use that img tag but I don't want to use and when I don't use the img function then onLoad not called!!!! @Andus

Andus Over a year ago

In that case, Shubham Khatri gave a nice answer about this :)

Collectives™ on Stack Overflow

How to use onload in react?

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related