CODEWITHSUNDEEP
javascriptreactjs
typos
typos

Reputation: 6632

export default arrow function cannot be imported

I'm using React, and I have something like this in my code:

renderDetails.js:

export default renderDetails = (details) => {
    // function logic removed for brevity
}

Then, in the same folder, I have another source file from where I want to import it, and I do something like this:

businessDetails.js:

import renderDetails from './renderDetails';
// rest removed for brevity

But, I get an error message pointing to my renderDetails.js file and says: "rederDetails is not defined". Any ideas what the problem might be and how to fix it?

Upvotes: 9

Views: 14955

Answers (3)

Rory Saxby
Rory Saxby

Reputation: 41

You can also write them like this:

export const exampleFunctionOne = () => {}

export const exampleFunctionTwo = () => {}

Then import the individual functions you require from said file like this:

import { exampleFunctionOne, exampleFunctionTwo } from './exampleFile';

I like this approach when wanting to combine similar functions into one file such as validators or filters making them easy to import and use across your application.

Upvotes: 2

Shubham Khatri
Shubham Khatri

Reputation: 281646

The problem is that even though you are exporting the component as default you are giving it a name which is not defined

You can either do

export default (details) => {

}

or

const renderDetails = (details) => {

}
export default renderDetails;

One more thing, when you are trying to render components, make sure that their name starts with a Uppercase character.

Upvotes: 30

marmeladze
marmeladze

Reputation: 6564

try that way.

functions.jsx

export function renderDetails(details) => {
    // function logic removed for brevity
}

then import like, 

import { renderDetails } from './functions';

P.S. ./ is for if both files a re in same namespace/folder.

Upvotes: 2

Related Questions