export default arrow function cannot be imported

user_6360938 0
Viewed 13316

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?

reactjs javascript
3 Answers

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.

user_59281860

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.

user_44813120

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.

user_52931620
Related