Fix <Badge> rendering when passed a Number

Author: glenjamin

src/Badge.jsx

@@ -8,11 +8,16 @@ var Badge = React.createClass({
     pullRight: React.PropTypes.bool
   },
 
+  hasContent: function () {
+    return ValidComponentChildren.hasValidComponent(this.props.children) ||
+      (typeof this.props.children === 'string') ||
+      (typeof this.props.children === 'number')
+  },
+
   render: function () {
     var classes = {
       'pull-right': this.props.pullRight,
-      'badge': (ValidComponentChildren.hasValidComponent(this.props.children)
-        || (typeof this.props.children === 'string'))
+      'badge': this.hasContent()
     };
     return (
       <span

test/BadgeSpec.jsx

@@ -23,6 +23,16 @@ describe('Badge', function () {
     assert.ok(instance.getDOMNode().className.match(/\bbadge\b/));
   });
 
+  it('Should have a badge using a number', function () {
+    var count = 42;
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Badge>
+        {count}
+      </Badge>
+    );
+    assert.ok(instance.getDOMNode().className.match(/\bbadge\b/));
+  });
+
   it('Should have a badge class pulled right', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Badge pullRight>