I want to load a different image(fake avatar) while the final avatar image is loading. The idea is to detect when the prop image is loaded and change a state. Is it possible? Some ideas? Thank you!

class ImageUser extends React.Component {



constructor(props) {

    super(props);

    this.state = {userImageLoaded: false};

    let imageSrc = ;



    if (!this.props.userImage) {

        imageSrc = this.props.noUserImage;

    } else {

        imageSrc = this.props.userImage;

    }



    this.loadingImage = <img className={styles.imageUser}

                     src={this.props.loadingImage} alt=2/>;



    this.userImage =

        <img onLoad={this.setState({userImageLoaded: true})}

             className={styles.imageUser} src={imageSrc}

             alt=1/>;



}



render() {

    let image = ;

    if (this.state.userImageLoaded) {

        image = this.userImage;

    } else {

        image = this.loadingImage;

    }

    return (

        <div>

            {image}

        </div>

    );

}

}



export default ImageUser;