React - How to export a pure stateless component

javascript reactjs ecmascript-6 export

user6002037 · Jan 17, 2017 · Viewed 69.7k times · Source

How can I export a stateless pure dumb component?

If I use class this works:

import React, { Component } from 'react';

export default class Header extends Component {
    render(){
        return <pre>Header</pre>
    }
}

However if I use a pure function I cannot get it to work.

import React, { Component } from 'react';
export default const Header = () => {
    return <pre>Header</pre>
}

Am I missing something basic?

Answer

ES6 doesn't allow export default const. You must declare the constant first then export it:

const Header = () => {
  return <pre>Header</pre>
};
export default Header;

This constraint exists to avoid writting export default a, b, c; that is forbidden: only one variable can be exported as default