React "export default" stateless component issue

Question

Why would this work:

const PostComponent = ({post}) => (
  <span>
      <div>{post.text}</div>
  </span>
)

export default PostComponent;

And not this:

export default PostComponent = ({post}) => (
  <span>
      <div>{post.text}</div>
  </span>
)

The later says the component is undefined when imported.

Because PostComponent is not defined. And you can't define and export at once with default export. export default function({post}) { ... } is possible however. — dfsq
– dfsq, Commented Jan 12, 2017 at 23:13
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — dfsq
– dfsq, Commented Jan 12, 2017 at 23:22

CodinCat · Accepted Answer · 2017-01-13 02:24:11Z

1

dfsq already answered in comments, and just to let you know, this will work

export default ({post}) => (
  <span>
      <div>{post.text}</div>
  </span>
)

but doing this, the component will be anonymous. If you have React devtool installed, you will just see StatelessComponent

answered Jan 13, 2017 at 2:24

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1