cannot export const arrow function

Question

new to ES6, I was trying to make a React simple functional component like this

// ./Todo.jsx      export default const Todo = ({       todos,       onTodoClick,     }) => (       <ul>         {todos.map( (todo, i) =>           <li key     = {i}                onClick = {() => onTodoClick(i) }                style   = {{textDecoration: todo.completed ? 'line-through': 'none' }}               >             {todo.text}           </li>         )}       </ul>     ) 

But

// Another file  import Todo from './Todos.jsx'; console.log(Todo) // undefined 

did not yield the arrow function.

but if I leave off the "const todo =" part in the export link, like so

    export default ({       todos,       onTodoClick,     }) => (...) 

It gets successfully imported.

Why is that?

Answer 1

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