0

I seem to be getting this error message when trying to update my state once an image has loaded using the onLoad event. I have a return statement in my class although it is complaining I don't. I receive this message upon runtime:

'Error: HPSpotlight(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.'

   import React, { PureComponent } from 'react';
import { inject, observer } from 'mobx-react';
import {
  HPSpotlightWrapper,
  HPSpotlightImage,
  HPSpotlightBox,
  HPSpotlightContainer,
  HPSpotlightImageContainer,
  HPSpotlightHeaderContainer
} from './index';
import getImagePath from '../../../lib/helpers/shared-helpers/image/get-image-path';
import getImageServerSrc from '../../../lib/helpers/shared-helpers/image/get-image-server-src';
import { UIHeaderNav } from '../../layout/header-nav/header-nav';
import { homepageKGID, sizes } from '../../../lib/constants';

@inject('homePageStore', 'uiStore', 'userStore')
@observer
export class HPSpotlight extends PureComponent {
  render() {
    const { homePageStore, uiStore, userStore, isHomePage, newNav } = this.props;
    const { user, isAnonymous } = userStore.state;
    const { spotlightImageSrc } = homePageStore.state;
    const { screenSize } = uiStore.state;

    let imageSrc = spotlightImageSrc ? spotlightImageSrc.url : null;
    const imagePath = imageSrc && getImagePath(imageSrc);
    const belowTablet = screenSize.width > sizes.tablet;
    this.state = {
      imageLoaded: false
    };
    const headerNavProps = {
      locationKGID: homepageKGID,
      noSearch: belowTablet,
      noCurrency: true,
      user,
      isAnonymous,
      isHomePage,
      newNav
    };

    imageSrc =
      imagePath &&
      getImageServerSrc({
        imagePath,
        layoutWidth: screenSize.width
      });

    return ( 
      <>
        <HPSpotlightContainer>
          <HPSpotlightHeaderContainer>
            <UIHeaderNav {...headerNavProps} />
          </HPSpotlightHeaderContainer>

          <HPSpotlightImageContainer>
            <HPSpotlightWrapper>
              <HPSpotlightImage imageLoaded={this.state.imageLoaded} imageSrc={imageSrc}>
                <img onLoad={() => this.setState({ loaded: true })} src={imageSrc} />
              </HPSpotlightImage>
              <HPSpotlightBox imageSrc={imageSrc} />
            </HPSpotlightWrapper>
          </HPSpotlightImageContainer>
        </HPSpotlightContainer>
      </>
    );
  }
}

It has something to do with this line in particular as removing it everything runs fine.

<img onLoad={() => this.setState({ loaded: true })} src={imageSrc} />
ashley g
  • 857
  • 3
  • 11
  • 21
  • Sorry but `HPSpotlightImage` does not render an image? Why you need `img` with the same image? Could you explain? – Giovanni Esposito Aug 12 '21 at 15:09
  • 1
    HPSpotlightImage is a styled component that is the container for the image, I was originally passing the image through to set it as the background image of that styled component, however I now need to check if the image has loaded (not rendered) so need to use the onLoad event, if it has loaded update the state and then pass this through to another component. Im not sure if this is possible with styled components therefore i have used the img tag. – ashley g Aug 12 '21 at 15:12

0 Answers0