Arrow function syntax in React stateless components

Question

I've recently discovered the joy of stateless components. For instance, this makes me quite happy (and it works):

import { Component, PropTypes } from 'react';

export default function ClassroomsOverview(props, context) {
  return (
    <div>
      <p>{context.classrooms.data.length} Classrooms.</p>
      <p>{context.classrooms.members.length} Students</p>
    </div>
  );
}

ClassroomsOverview.contextTypes = {
  classrooms: PropTypes.object
}

I would be even happier if I could make the same component work with E6 arrow function syntax, like so:

import { Component, PropTypes } from 'react';

const ClassroomsOverview = (props, context) => (
    <div>
      <p>{context.classrooms.data.length} Classrooms.</p>
      <p>{context.classrooms.members.length} Students</p>
    </div>
  );

ClassroomsOverview.contextTypes = {
  classrooms: PropTypes.object
}

I've followed this video, but I can't get the arrow syntax version to work.

Can anybody point out what I'm doing wrong please?

Answer 1

You're missing the export declaration. Add this to your module:

export {ClassroomsOverview as default}

I would however recommend using the export default syntax with the function declaration.