How to render a single data from an api call in reactjs

Question

I have done the api call this way, I am able to see the return array in network, it has a single array with store details, I have to output the store name, how to render it, I am familiar with map function to display lista. How to render a single output

import StoreService from "../../services/Store/store.service";
import { Store } from "../../models/Store/store.model";
    
    interface OfferListProps {
        activeStoreId: string;
    }
    
    function Overview(props: OfferListProps) {
        const { activeStoreId } = props;
        const [loading, setLoading] = useState(false);
        const [stores, setStores] = useState<Store[]>([]);
    
        const handleFetchStore = () => {
            StoreService.fetchStores(
                (store: Store[]) => {
                    setStores(stores);
                },
                () => { },
                () => { }
            );
        };
    
        useEffect(() => {
            if (activeStoreId) {
                handleFetchStore();
            }
        }, [activeStoreId]);

Why do you need to fetch all stores StoreService.fetchStores for a single store display? — Nick Vu
– Nick Vu, Commented Mar 29, 2022 at 6:02
you can check StoreService to find something like fetchStore (not fetchStores) that would help you get a single store by store id. If it's not there, I can help you out with a workaround — Nick Vu
– Nick Vu, Commented Mar 29, 2022 at 7:01
static showStore( storeId: string, onSuccess: Function, onError: Function, onFinal: () => void ) { const API_URL = ApiRoutes.STORES_URL + '/' + storeId; return axiosInstance .get(API_URL) .then(response => { const store = deserialize(Store, response.data["store"]); onSuccess(store); }) .catch(error => { onError(error); }) .finally(() => { onFinal(); }) } — tiedantebreak
– tiedantebreak, Commented Mar 29, 2022 at 7:10

Nick Vu · Accepted Answer · 2022-03-29 07:15:31Z

Instead of using an array in the state, you can pass an object for a single store rendering

const [store, setStore] = useState<Store>();

import StoreService from "../../services/Store/store.service";
import { Store } from "../../models/Store/store.model";
    
    interface OfferListProps {
        activeStoreId: string;
    }
    
    function Overview(props: OfferListProps) {
        const { activeStoreId } = props;
        const [loading, setLoading] = useState(false);
        const [store, setStore] = useState<Store>(); //only set a single store
    
        const handleFetchStore = (storeId) => {
            StoreService.showStore(storeId,
                (store: Store) => {
                    setStore(store); //set store data
                },
                () => { },
                () => { }
            );
        };
    
        useEffect(() => {
            if (activeStoreId) {
                handleFetchStore(activeStoreId);
            }
        }, [activeStoreId]);

After this, you can use store for rendering

Collectives™ on Stack Overflow

How to render a single data from an api call in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related