in Meteor+React, how can i render a child React component in a parent React component?

Question

i have defined a Parent component and a Child component. i'm getting an error when i associate them.

Parent.jsx

import React, {Component, PropTypes} from 'react';
import {Child} from '/imports/ui/components/Child';

export default class Parent extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <Child />
        );
    }
}

Child.jsx

import React, {Component, PropTypes} from 'react';

export default class Child extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>child</div>
        );
    }
}

i have registered the parent with Blaze:

Template.registerHelper("Parent", function() {
    return Parent;
});

... and i'm using it like this:

<div>
    {{> React component=Parent }}
</div>

i'm getting this error in the browser console:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Parent.

i do have other React components working in this project, but none of them have this simple parent/child relationship. what am i doing wrong?

Answer 1

You should

export Child instead of export default Child

or

import Child instead of import {Child}