How to import method which is default exported from object in React?

Question

I have module like this

export default {
    getRating(productId) {
        return axios
            .get(
                `<some-paramethers>`,
            )
            .then(response => response.data)
            .catch((error) => {
                console.log('Failed to get reviews :', error);
            });
    },

    getMultipleProductRatings(productIds) {
        return axios
            .get(
                `<some-paramethers>`,
            )
            .then(response => response.data)
            .catch((error) => {
                console.log('Failed to get reviews :', error);
            });
    },
};

and I have to import one or both of this methods into my React component.

I tried like this:

import getRating from '../../my-module/path';


const ProductCards = ({ slidesCollection }) => {
    const [ratingStats, setRatingStats] = useState({ averageRating: 0 });
    const productId = 'xxxxxxx';

    useEffect(() => {
        getRating(productId).then(res => {
            console.log(res);
        });
    }, []);

but I get error in the browser: TypeError: Object(...) is not a function

pointing at getRating function in useEffect hook

that is because of this bracket here "export default {" you are exporting default object — Gursharn Singh, Mar 25 '20 at 22:07
I see you have 2 functions so you should export them not default export and then when you import use { } to import functions like "export const getRating = () => {}" then in import import {getRating} from "../yourPath" — Gursharn Singh, Mar 25 '20 at 22:10
nope, tried that one out, then I get this: ./src/components/ProductCarousel/ProductCards.jsx Attempted import error: 'getRating' is not exported from '../../adapters/bazaarVoice.adapter'. — Pokreniseweb, Mar 25 '20 at 22:10
you need to export like I export, export not default export and export them as function — Gursharn Singh, Mar 25 '20 at 22:11
Is there a way to import one of this methods if I don't change the current syntax? — Pokreniseweb, Mar 25 '20 at 22:13
yes you can, just give name to your export default but I would like you to read few things here https://stackoverflow.com/questions/34714826/better-to-export-an-object-containing-function-or-just-export-multiple-function https://codeburst.io/every-thing-you-should-know-about-javascript-export-660cb4e08473 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export — Gursharn Singh, Mar 25 '20 at 22:19

score 1 · Accepted Answer · answered Mar 26 '20 at 01:22

const helpers = {
    getRating: (productId) => {
        return axios
            .get(
                `<some-paramethers>`,
            )
            .then(response => response.data)
            .catch((error) => {
                console.log('Failed to get reviews :', error);
            });
    },

    getMultipleProductRatings: (productIds) => {
        return axios
            .get(
                `<some-paramethers>`,
            )
            .then(response => response.data)
            .catch((error) => {
                console.log('Failed to get reviews :', error);
            });
    },
};

export default helpers;

Usage:

import helpers from '../../my-module/path';


const ProductCards = ({ slidesCollection }) => {
    const [ratingStats, setRatingStats] = useState({ averageRating: 0 });
    const productId = 'xxxxxxx';

    useEffect(() => {
        helpers.getRating(productId).then(res => {
            console.log(res);
        });
    }, []);

How to import method which is default exported from object in React?

1 Answers1