You're trying to export a default and declare a variable at the same time, which is invalid syntax.
Consider the following, since we know that you can declare multiple variables using only one instance of the keyword, var a, b, c; the export definition wouldn't make sense at all.
export default var a, b, c;
What would that mean? What would get exported?
Furthermore, using the export default syntax already creates a variable called default that needs to contain a value or reference.
Export the variable instead if you want to make it a constant.
const Todo = () => {};
export default Todo;
There is a thread about this on ESDiscuss
Answer from Henrik Andersson on Stack OverflowYou're trying to export a default and declare a variable at the same time, which is invalid syntax.
Consider the following, since we know that you can declare multiple variables using only one instance of the keyword, var a, b, c; the export definition wouldn't make sense at all.
export default var a, b, c;
What would that mean? What would get exported?
Furthermore, using the export default syntax already creates a variable called default that needs to contain a value or reference.
Export the variable instead if you want to make it a constant.
const Todo = () => {};
export default Todo;
There is a thread about this on ESDiscuss
Arrow function default export:
import React from 'react';
const Body=()=>(
<div>This is my body</div>
);
export default Body;
Arrow function Named exports:
- First Way
import React from 'react'; export const Body = () => ( <div>This is my body</div> );
- Second Way
import React from 'react'; const Body = () => { return <div>This is my body</div> }; export {Body};
You can also use 1 default and multiple named exports in the same file check below examples:
Example 1:
import React from 'react';
const Body1 = () => {
return <div>This is my body1</div>
};
const Body2 = () => {
return <div>This is my body2</div>
};
export {Body1, Body2};
you can import by using below code. import {Body1, Body2} from 'bodyComponentPath';
Example 2
import React from 'react';
const MainBody = () => {
return <div>This is my MainBody</div>
};
const Body1 = () => {
return <div>This is my body1</div>
};
const Body2 = () => {
return <div>This is my body2</div>
};
export {Body1, Body2};
export default MainBody;
you can import by using below code. import MainBody, {Body1, Body2} from 'bodyComponentPath';
/* use named export components inside the curly bracket only */
import MainBody, {Body1, Body2} from 'bodyComponentPath';
Is it possible to export Arrow functions in ES6/7?
Directly exporting an (arrow) function prevents it from being named
export default arrow function cannot be imported
What scenario would I not use an Arrow function?
Videos
Is it possible to export Arrow functions in ES6/7?
Yes. export doesn't care about the value you want to export.
The export statement below gives a syntax error ... why?
You cannot have a default export and give it a name ("default" is already the name of the export).
Either do
Copyexport default () => console.log("say hello");
or
Copyconst hello = () => console.log("say hello");
export default hello;
If you don't want a default export, you can simply export a named function with this syntax:
Copyexport const yourFunctionName = () => console.log("say hello");
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.
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.
Right now I'm using arrows functions for my components and my business logic to me it just looks cleaner, but is there a situation where I shouldn't use it?
You can't export something as default with a type annotation on the same line. If you wanted to do it in a one-liner while retaining the function signature you could do it as a named export:
export const func: () => void = () => {
console.log('I CAN export my function in this way');
};
the importing file would then import like this:
import {func} from 'path'
or...
You'd have to rip off the function signature:
export default () => {
console.log('I CAN export my function in this way')
}
Then import it as whatever:
`import bloopityBloop from 'path'`
You sure can export default and apply a type/interface in one statement...
export default (
() => {
console.log('I CAN export my function in this way');
}
) as () => void;
The vast majority of React projects I've seen declare and export components as follows:
const Timer = (props) => {
// component code here
}
export default Timer;Even newly created default React project uses this in App.jsx file.
On one of the project I worked on it was prohibited to use default exports even for components. So we had:
export const Timer = (props) => {
// code
}
// and then import
import { Timer } from './components/Timer"The guy who created the style guide for the project believed that default exports are bad. But importing Timer from Timer is so stupid, isn't it? And it was not the only project I've seen using this kind of exporting components.
But my question is why I almost never see anyone using this:
export default function Timer(props) {
// code
}In my opinion it's much better than 2 previous options. It's short. It's clear. Maybe there are some cons I don't see?