The syntax for the Arrow function in React Stand-Alone Elements

Question

I recently discovered the joy of stateless components. For example, 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 with the E6 arrow function syntax , for example:

 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 watched this video , but I cannot get the version of the arrow syntax to work.

Can anyone point out what I'm doing wrong?

Answer 1

You are missing an export declaration. Add this to your module:

 export {ClassroomsOverview as default} 

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