I almost brought the case over, but I still can"t. Ask for advice, everyone

import React from "react";
import LazyLoad from "react-lazyload";
import Lazyloading from "../Lazyloading/index";
import Placeholder from "../Lazyloading/Placeholder";

class Griddoubt extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    };
    render() {
        const data = this.props.data;
        //[{once: false, id: "https://img.codeshelper.com/upload/img/2021/07/01/vek1e2gojbc18534.png", count: 1},]
        return (
            <div>
                {data.map((el, index) => {
                    return (
                        <LazyLoad
                            once={el.once}
                            key={index}
                            height={200}
                            offset={[100, 0]}
                            placeholder={<Placeholder />} //loading
                            debounce={500}
                        >
                            <Lazyloading once={el.once} id={el.icon} count={index + 1} />
                        </LazyLoad>
                    );
                })}
            </div>
        );
    }
}

export default Griddoubt;


import React from "react";

class Lazyloading extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isReady: true,
            count: 1,
        };
    };

    componentWillReceiveProps(nextProps) {
        if (nextProps.id !== this.props.id && this.props.id) {
            this.setState({
                isReady: false
            });

            setTimeout(() => {
                this.setState({
                    isReady: true,
                    count: this.state.count + 1
                });
            }, 500);
        } else {
            this.setState({
                isReady: true
            });
        }
    }

    render() {
        console.log(this.props);//
        return this.state.isReady ? (
            <div className="" style={{ height: "234PX", width: "50%", float: "left", background: "rgb(133, 138, 223)", textAlign: "center", }}>
                {this.props.once ? (
                    <div >
                        
                    </div>
                ) : (
                        <div >
                            
                        </div>
                    )}
            </div>
        ) : (
                <div >
                    loading...
                </div>
            );
    }
}

export default Lazyloading;

import React from "react";

export default function Placeholder() {
    return (
        <div style={{ height: "234PX", width: "50%", float: "left", background: "rgb(229, 142, 196)", textAlign: "center" }}>
            <img src="https://img.codeshelper.com/upload/img/2021/07/01/njrgcvth0e518535.png"
                style={{ width: "50% " }}
            />
        </div>
    );
}