React Js axios returns empty div before actual data

1

Hi, everyone. I’m new to React Js, and I can’t find what’s wrong with my code. I’m working on a simple app, that should render the data received from a JSON file… I was able to fetch data from a local JSON file using Axios and display it. The problem is that app renders an empty array(of the selected data) first, and only after that the actual data itself.

local json file:

{
    "home": [

{
            "id": "app",
            "management": [
                {
                    "id": "image",
                    "alt": "truck",
                    "img": "./img/assets/img.png",
                    "img2": "./img/assets/img2.png",
                    "img3": "./img/assets/img3.png"
                },
                {
                    "id": "services",
                    "title": "Managementt",
                    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                     nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis 
                     aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat 
                     nulla pariatur."
                }
            ]
        }

]

My code to fetch data from local JSON is:

const [services, setServices] = useState([]);

    const getServices = async () => {
        const response =  await axios.get("./home.json");
        setServices(response.data.home[2].management);
        console.log(response);
    };
    useEffect(() => {
        getServices();
    }, []);

then it gets displayed using this code:

return (
        <>
            <Layout>
                {services.map(({
                        img,
                        img2,
                        img3,
                        id,
                        title,
                        text,
                    }) => (
                        <>
                            <div className={styles.flex}>
                            {id === "image" ? (

                                        <img
                                            id={id}
                                            className={styles.logo}
                                            srcSet={`${img2} 2x,
                                        ${img3} 3x`}
                                            alt={alt}
                                            src={img}
                                        />
                                    ) : null}
                                </div>
                                <div>
                                    {id === "services" ? (
                                        <div className={styles.services} key={id}>
                                            <div style={{ display: "flex" }}>
                                                <h1 className={styles.text}>{title}</h1>
                                            <p>{text}</p>
                                        </div>
                                    ) : null}
                                </div>
                            </div>
                        </>
                    )
                )}


            </Layout>
        </>

What happens is before actual image/text gets displayed, the app renders an empty div that can bee seen in console.log(has the same className and parameters as the rendered data, for example, if text’s div has a width of 400px, next to the image there is an empty div with 400px width also) and it’s messing up all styles. I want to display image and the text as flex(next to each other on the page), but when I use display flex, text’s empty array displays first and takes the space near the image, and the actual text gets displayed below the image.

Any suggestions will be greatly appreciated.

Thank you

2

You have set it to be that.

const [services, setServices] = useState([])

Return null if you don’t want it to render anything

if (services.length) {
  // return what you're currently returning
} else {
  return null;
}