React proptypes component vs element

Question

What is the difference between :

var Icon = React.createClass({
  propTypes: {
    name: React.PropTypes.string
  },
  render: function(){
    return (
      <span className={'glyphicon glyphicon-'+this.props.name}></span>
    );
  }
});

var Button = React.createClass({
  propTypes: {
    content: React.PropTypes.element // This one?
    content: React.PropTypes.component // Or this one?
  },
  render: function() {
    return (
       <button>{content}</button>
    );
  }
});

I'd like to use;

<Button content={<Icon name="heart" />} />

In which case should I use the other?

Thanks

Answer 1

I think you should render the Button like this:

var Button = React.createClass({
  render: function() {
    return (
       <button>{this.props.children}</button>
    );
  }
});

Then you can use it with an <Icon /> or anything else (text...) :

<Button><Icon name="heart" /></Button>

or

<Button>anything</Button>

And then the correct proptype depends on what you want to allow inside your <Button /> (But I'm not sure React.PropTypes.component exists, it's not in the documentation: http://facebook.github.io/react/docs/reusable-components.html)