How can I store an API fetch request response in a global variable without useState? – Reactjs

I need to access an API in a loop, but for the life of me I cannot seem to store the data to be used outside the loop. I can’t use useState because it continuously calls the API and I have a limited amount of calls to the API I’ll be using (and I’ve been reading that I shouldn’t use it in loops/conditions anyway), I’m just using a random free API now for testing.

Here’s the code:

    const formatRec = () => {
        let rec = [];
        let no_movies = document.getElementById("no_of_movies").value;
        
        for (let i = 1; i <= no_movies; i++) {

            let imdbHolder = "No";
            fetch(`https://catfact.ninja/fact`, {
                method: 'GET',
            })
            .then(res => res.json())
            .then(data => {
                imdbHolder = data.fact;
                console.log(imdbHolder);
            });

            rec.push(<p>{prediction.data.Recommendatons[0][i]} - {imdbHolder}</p>);
            console.log("catfact?: " + imdbHolder);
        }

        return rec;
    };

The only thing I’ve tried that even nearly works is using global.imdbHolder instead of just imdbHolder, but the problem is that the data itself is the same on every item pushed with global.imdbHolder only storing the last response outside of the fetch request (The console log in the fetch request does return the different data though).

Does anyone know how I could go about solving this?

Sorry if this has already been answered, I’ve seen some people with similar problems, but their solutions either weren’t applicable for me or didn’t work.

Edit: Here’s my entire App.js file, incase it can help at all:

import { useState } from 'react';

const App = () => {
    const [prediction, setPrediction] = useState(null);
    //const [imdb, setImdb] = useState(null);

    const onSubmit = async e => {
        e.preventDefault();

        const formData = new FormData();
        formData.append("target_user", document.getElementById("target_user").value)
        formData.append("no_of_highest", document.getElementById("no_of_highest").value)
        formData.append("no_of_similar_users", document.getElementById("no_of_similar_users").value)
        formData.append("no_of_movies", document.getElementById("no_of_movies").value)

        fetch('http://localhost:5000/upload', {
            method: 'POST',
            body: formData
        })
        .then(res => res.json())
        .then(data => {
            console.log("checkpoint1");
            console.log(data.data);
            setPrediction(data);
        });
    };

    const formatTop = () => {
        let top = [];
        for (let i = 0; i <= document.getElementById("no_of_highest").value; i++) {
            top.push(<p>{prediction.data.Users_Top_Movies[0][i]}</p>);
        }
        return top;
    };

    const formatSim = () => {
        let sim = [];
        for (let i = 0; i <= document.getElementById("no_of_similar_users").value-1; i++) {
            sim.push(<p>User #{prediction.data.Similar_Users[i]}, seperated by a distance of {prediction.data.Sim_User_distances[i]}</p>);
        }
        return sim;
    };

    const formatRec = () => {
        let rec = [];
        let no_movies = document.getElementById("no_of_movies").value;
        
        for (let i = 1; i <= no_movies; i++) {

            // The real API I want to call from and attach to each movie
            // fetch(`https://imdb-api.com/en/API/SearchMovie/<my API key>/${prediction.data.Recommendatons[0][i]}`, {
            fetch(`https://catfact.ninja/fact`, {
                method: 'GET',
            })
            .then(res => res.json())
            .then(data => {
                imdbHolder = data.fact;
                shitest.push(data.fact)
            });
            
            // How I want to display the data from both APIs
            // rec.push(<p>{prediction.data.Recommendatons[0][i]} - <a href={'https://www.imdb.com/title/' + imdbHolder}>IMDb link</a></p>);
            rec.push(<p>{prediction.data.Recommendatons[0][i]} - {global.imdbHolder}</p>);
        }

        return rec;
    };

    return (
        <div classMovieName='App'>
            <form onSubmit={onSubmit}>
                <div className='custom-file'>
                    <label for="target_user">target_user</label>
                    <input type="number" id="target_user" name="target_user" />
                    <br />
                    <br />
                    <label for="no_of_highest">no_of_highest_rated_movies_by_target_user</label>
                    <input type="number" id="no_of_highest" name="no_of_highest" />
                    <br />
                    <br />
                    <label for="no_of_similar_users">no_of_similar_users</label>
                    <input type="number" id="no_of_similar_users" name="no_of_similar_users" />
                    <br />
                    <br />
                    <label for="no_of_movies">no_of_movies_to_recommend</label>
                    <input type="number" id="no_of_movies" name="no_of_movies" />
                </div> 
                <input
                    type='submit'
                    value='Submit'
                    className='btn btn-primary btm-block mt-4'
                />
            </form>
            <h1>Users Top Movies</h1>
            { prediction && formatTop() }
            <br />
            <h1>Users Most Similar to Target User</h1>
            { prediction && formatSim() }
            <br />
            <h1>Recommendations Based on Similar Users</h1>
            { prediction && formatRec() }
        </div>
    );
};

export default App;

So basically, I’m already taking in data (movie data) from my own backend through Flask, and I’m receiving that data as JSON in React, now I’m trying to access a a different API (IMDb, but testing with this cat fact one) and get information that can be tied to each data point from the flask and then output on the same line.

Edit #2: Here’s what it looks like (The IMDb links all only link to the first one (using global.imdbHolder)):