Use data from async function on React State with JSX

Question

I'm kinda new on React and JS, and I'm having a problem using the data is returned from ASYNC on State and then passing it as JSX. Here is my code:

(PS: I'm receiving from database the data and its working correctly when i console log from the inside function, but I can't seems to find a way using it outside)

import {useState, useEffect} from 'react';
import {supabase} from '../db/supabase'
import styled from 'styled-components';
//CSS
const Container = styled.div`
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;`

const RandomQuote = styled.h1`
width: 75%;
font-size: 3.65em;
color: #333;`
export default function App() {
    const [quote, setQuote] = useState();

    useEffect(() => {
        getQuotes().then().catch();
    });

    async function getQuotes() {
        const {data, error} = await supabase
            .from('quotes_en')
            .select('quote')
        const getRandomQuote = await data[Math.floor(Math.random() * data.length)];
        if (error) console.table(error)
        setQuote(getRandomQuote);
    };

    return (
        <Container>
            <RandomQuote>{quote}</RandomQuote>
        </Container>
    );
}

So the random_quote is returning: Object quote: "Our life will pass like the traces of a cloud, it will be scattered like mist that is chased by the rays of the sun. For our time is the passing of a shadow. Our lives will run like sparks through the stubble." __proto__: Object Object quote: "Our life will pass like the traces of a cloud, it will be scattered like mist that is chased by the rays of the sun. For our time is the passing of a shadow. Our lives will run like sparks through the stubble." __proto__: Object with console.log [Object]

While data is returning: Array(4) 0: {quote: "Sometimes it takes sadness to know happiness, nois…ppreciate silence, and absence to value presence."} 1: {quote: "If there is no enemy within, the enemy outside can make us no harm."} 2: {quote: "Our life will pass like the traces of a cloud, it …r lives will run like sparks through the stubble."} 3: {quote: "Little by little, day by day, what is meant for you will find its way"} length: 4 __proto__: Array(0) [Array with Objects]

So can someone firstly explain the problem so I can learn, then sharing a snippet of the updated code would be even better.

Answer 1

All what you need - its just setQuote after getting it from server, inside of getQuotes . And use this function in hook useEffect for first render.

Like this:

    const [quote, setQuote] = useState();

    const getQuotes = async() => {
        const {data, error} = await supabase
            .from('quotes_en')
            .select('quote')
        const getRandomQuote = await data[Math.floor(Math.random() * data.length)];
        if (error) console.table(error)
        setQuote(getRandomQuote); //Here quote goes to state
    };

    useEffect(() => {
      getQuotes().then().catch() //nasty hack for IDE
    }, []);