Augustin Riedinger Augustin Riedinger - 21 days ago 7
React JSX Question

React proptypes component vs element

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

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)

Comments