CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Reacting
Reacting

Reputation: 6133

How to export 2 arrow functions on react

I have this file

const validateIfDataExist = value => (value === null ? 'N/A' : value);

const removeNumbersFromAString = value => value.replace(/[^a-z]/gi, '');

export { validateIfDataExist, removeNumbersFromAString };

And I am trying to call here one of the modules:

import removeNumbersFromAString from '../../utils/validation-utils';

But I am getting an error when I try to import it:

Default export is not declared in imported module

So, why should I set export default ?

Upvotes: 0

Views: 3740

Answers (3)

Miguel Angel
Miguel Angel

Reputation: 983

You can change your imports like this:

export const validateIfDataExist = value => (value === null ? 'N/A' : value);

export const removeNumbersFromAString = value => value.replace(/[^a-z]/gi, '');

export default { validateIfDataExist, removeNumbersFromAString };

There you have an example of how to export everything, maybe you don't need to export it all, but you can decide. Now, to import you can:

import { removeNumbersFromAString, validateIfDataExist } from '../../utils/validation-utils';

or

import validationUtils from '../../utils/validation-utils';
const { validateIfDataExist, removeNumbersFromAString } = validationUtils;

Export just what you want instead of the default is a better approach to avoid include unnecessary and heavy libraries on your component, But you can do both

Hope this helps you!

Upvotes: -1

Iwnnay
Iwnnay

Reputation: 2008

The syntax that you're using assumes that you're trying to import the default export from ../../utils/validation-utils.

To Get it working with what you have

import { removeNumbersFromAString } from '../../utils/validation-utils';

This will pull the named exports from that file. You've exposed validateIfDataExist and removeNumbersFromAString by exporting them the way you have it.

What the error is telling you

It seems like you understand this, but I think it's fair to bring up. You can export a default constant or function from a file by doing this:

export default function validateIfDataExist(value) {
  return value === null ? 'N/A' : value;
}

Then with the import statement that you can choose to either keep the same name or rename it for your purposes in the importing file.

import removeNumbersFromAString from '../../utils/validation-utils';

or

import somethingTotallyDifferent from '../../utils/validation-utils';

both work the exact same, importing the default function and casting it to the variable.

Everything operator (*)

As a total aside to that aside, this would also work with what you've got

import * as validations from '../../utils/validation-utils';

validations.removeNumbersFromAString(string);
validations.validateIfDataExist(data);

Upvotes: 2

kind user
kind user

Reputation: 41913

Since you didn't use a default export:

export default removeNumbersFromAString;

you will have to use a named import instead.

import { removeNumbersFromAString } from '../../utils/validation-utils';

Upvotes: 3

Related Questions