How to import data from another file in javascript/react

Question

I was thinking I could do something like this:

export default () => {
    return [
        {
            text: 'Full-time',
            value: 'fulltime',
            key: 'fulltime'
        },
        {
            text: 'Part-time',
            value: 'parttime',
            key: 'parttime',
        },
        {
            text: 'Freelance',
            value: 'freelance',
            key: 'freelance',
        },
    ]
};

And then in my component I could get that data to use in a dropdown like this:

import { positionTypeOptions } from '../components/data/PositionTypes';

<Form.Select label="&nbsp;" placeholder="Type" options={positionTypeOptions} width={3} />

However the data does not seem to be exported. The data in undefined. Any ideas how this could be done? I would like to return an array to be used in another component.

What do you mean by it does not seem to be exported? Do you have any error? What does positionTypeOptions evaluate? — lilezek
– lilezek, Commented Sep 24, 2017 at 16:07
sorry updated the question with positionTypeOptions in {}, which returns undefined. When I do it without {} it returns a function and i want an array — strangeQuirks
– strangeQuirks, Commented Sep 24, 2017 at 16:10

Saugat · Accepted Answer · 2017-09-24 16:27:01Z

5

You are exporting an anonymous function as default. Try this:

export const positionTypeOptions = [
    {
        text: 'Full-time',
        value: 'fulltime',
        key: 'fulltime'
    },
    {
        text: 'Part-time',
        value: 'parttime',
        key: 'parttime',
    },
    {
        text: 'Freelance',
        value: 'freelance',
        key: 'freelance',
    },
];

edited Sep 24, 2017 at 16:27

Saugat

1,33914 silver badges22 bronze badges

answered Sep 24, 2017 at 16:12

lilezek

7,4552 gold badges30 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhirajshri Winsome · Accepted Answer · 2021-08-11 12:43:28Z

2

You don't have to return a function from the export. Just return an object, like this:

export default {
    [
        {
            text: 'Full-time',
            value: 'fulltime',
            key: 'fulltime'
        },
        {
            text: 'Part-time',
            value: 'parttime',
            key: 'parttime',
        },
        {
            text: 'Freelance',
            value: 'freelance',
            key: 'freelance',
        },
    ]
};

For the import, remove the curly brackets since you have a default export:

import positionTypeOptions from '../components/data/PositionTypes';

edited Aug 11, 2021 at 12:43

Abhirajshri Winsome

1751 silver badge16 bronze badges

answered Sep 24, 2017 at 16:14

Joel Raju

1,3702 gold badges18 silver badges22 bronze badges

Collectives™ on Stack Overflow

How to import data from another file in javascript/react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related