CODEWITHSUNDEEP
reactjs
Sakilahmed saju
Sakilahmed saju

Reputation: 11

In reactjs i want to render like 'no data found' when api request return empty array

const [items, setItems] = useState([]);

useEffect(() => {
        axios
            .get(
                `https://intense-wave-00513.herokuapp.com/addedProducts/${user.displayName}`
            )
            .then((data) => {
                setItems(data.data);
            });
    }, [user.displayName]);

return(
    <div>
       {
         items?.length?<p>somthing</p>:<Spinner/>
       }
    </div>

)

But when the api return empty data how to show 'no data found' In my case spinner is running all the time when no data found

Upvotes: 1

Views: 510

Answers (1)

Woadud Akand
Woadud Akand

Reputation: 748

const [items, setItems] = useState([]);
const [isLoading, setLoading] = useState(false);

useEffect(() => {
        setLoading(true);
        axios
            .get(
                `https://intense-wave-00513.herokuapp.com/addedProducts/${user.displayName}`
            )
            .then((data) => {
                setItems(data.data);
                setLoading(false);
            });
    }, [user.displayName]);

return(
    <div>
       {
         !isLoading? <> {items.length ? <p>somthing</p> : <p>data not found</p>} </> : <Spinner/>
       }
    </div>

)

Upvotes: 1

Related Questions