L
L
lookingfor22020-10-19 16:39:16
React
lookingfor2, 2020-10-19 16:39:16

How to implement a text string before loading the main array?

I need it to show "Data is being loaded" before loading an array of objects with user operation data,
at the moment, initially I store an empty array in the state variable, pass it to the component, from where I sort through the data, before I get all the data, I need text information, the array itself may end up empty, and I will need to display "You had no operations"

xport default function App() {
    const [operationsLoan, setOperationsLoan] = useState([] );

    useEffect(() => {
            apiGetOperationsLoan()
                .then((response) => {
                    setOperationsLoan(response.data);
                });
    }, []);
    return (
        <>
            <div className="cabinet__history-title">
                <h1>
                    История операций
                </h1>
            </div>
            <TabBar>
                <TabBarItem label="Операции по займам">
                    <div className="loans-history">
                        {
                            operationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })
                        }
                    </div>
                </TabBarItem>
            </TabBar>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
Roman, 2020-10-19
@Isildur12

export default function App() {
    const [operationsLoan, setOperationsLoan] = useState([] );
    const [loading, setLoading] = useState(false);

    useEffect(() => {
         setLoading(true);
            apiGetOperationsLoan()
                .then((response) => {
                    setOperationsLoan(response.data);
                    setLoading(false);
                });
    }, []);

// можно еще так сделать, зависит от обстоятельств
//   if (loading) {
 //    return <p> Идет загрузка данных </p>
 //  } 

    return (
        <>
            <div className="cabinet__history-title">
                <h1>
                    История операций
                </h1>
            </div>
            <TabBar>
                <TabBarItem label="Операции по займам">
                    <div className="loans-history">
                        {loading ? <p>Идет загрузка данных</p>
                                :   { operationsLoan.map((loan, index) => {
                                return <Loan loan={loan} key={index}/>;
                            })}
                          }
         
                    </div>
                </TabBarItem>
            </TabBar>

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question