Forem: Anunoy Dussa

How to use Async/Await with Fetch API in React Component?

Anunoy Dussa — Wed, 13 Mar 2024 22:30:39 +0000

Hello,

I'm trying to fetch restaurants data in React using async and await and update my restaurants state with the returned restaurants response

In the code below (under Method 2) I created an async function and called await fetchRestaurants() which returns a response

I don't understand why within the aync function, I'm able to access the list of restaurants data. However, when I return the data, it's a promise

Can someone explain why this happens?

  const fetchRestaurants = () => {
    ...
    // returns {Promise<Array<{ name: string, rating: number,  location: string}>}
  }

   const [restaurants, setRestaurants] = useState([]);

    useEffect(() => {
        // Method 1 - works!
        const promise = fetchRestaurants();

        promise
             .then((data) => {
                 setRestaurants(data);
             })
             .catch((error) => {
                 console.error(error);
             });

        // Method 2 - doesn't work
        const asyncFetchRestaurants = async () => {
            try {
                const data = await asyncFetchRestaurants();
                console.log("INSIDE", data); // this prints out the list of restaurants
                return data; // why does this return a promise?
            } catch (error) {
                console.error(error);
            }
        };

        const data = asyncFetchRestaurants(); // why is data a promise and not a list of restaurants
        console.log("OUTSIDE", data); // this prints out a promise!
        setRestaurants(data) // this doesn't work! 
    }, []);

React useState Help - Update item in Array of Objects

Anunoy Dussa — Thu, 08 Feb 2024 18:13:47 +0000

Hello,

I'm creating a game where you have to roll ten dice and get their numbers to match. You can reroll the dice and you can click on a die to freeze it (keep it's number/don't reroll)

I'm storing dice data in a useState that holds an array of objects

When I try to update the useState object by directly reversing the die's isFrozen boolean, it doesn't work. Instead, it works when I make a copy of the die object, update it, and return it

I don't understand why I can't directly update the die object in the array. Why do I have to create a copy of the die object?

useState

    const [dice, setDice] = useState(() => {
        const diceArray = [];
        for (let i = 1; i <= 10; i++) {
            diceArray.push({ id: nanoid(), num: rollDice(), isFrozen: false });
        }
        return diceArray;
    });

freezeDie code - Doesn't work

    const freezeDie = (id) => {
        setDice((oldDice) =>
            oldDice.map((die) => {
                if (die.id === id) {
                    console.log("die", die);
                    console.log("");
                    die.isFrozen = !die.isFrozen; // THIS LINE
                }
                return die;
            })
        );
    };

Result

the first click reverses the isFrozen boolean (it freezes the die - intended)
future clicks reverses the isFrozen boolean twice (basically nothing changes - not intended)

freezeDie code - Works

    const freezeDie = (id) => {
        setDice((oldDice) =>
            oldDice.map((die) => {
                if (die.id === id) {
                    console.log("die", die);
                    console.log("");
                    return { ...die, isFrozen: !die.isFrozen };  // THIS LINE
                }
                return die;
            })
        );
    };

Result

the first click reverses the isFrozen boolean (it freezes the die - intended)
future clicks also reverse the isFrozen boolean but call the function twice (not sure why it's being called twice)

How to host websites for free?

Anunoy Dussa — Tue, 16 Jan 2024 00:40:23 +0000

Hi,

I started learning web development 3 months ago and I created a couple of applications.

I want to host my websites online, but there are so many services that I don’t know where to start.

What I’m looking for is a service that offers a free plan where I can host my front-end and full-stack projects.

I’ve heard that you can host front-end websites on GitHub pages. I wasn’t sure if this is the recommended way to host websites, or if there’s a better free service.

For full-stack applications, I tried using Render’s free plan. However, my website spins down after 15 minutes of inactivity and it takes a couple of minutes to spin back up when it receives a request.

I want to show my applications to employers without having to take minutes to load the webpage. Is there another free alternative to host a full-stack application that offers a faster load time?