export default arrow function cannot be imported

Question

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?

Answer 1

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.