NavItem includes anchor attributes on the li tag

`{...this.props}` passes DOM attributes to the li tag incorrectly.

I "fixed" this by turning on the harmony features in grunt-react, and
using the spread operator which is the recommended path from React. We
can just as easily do this manually

Author: jquense

Gruntfile.js

@@ -59,6 +59,9 @@ module.exports = function (grunt) {
     },
 
     react: {
+      options: {
+        harmony: true
+      },
       src: {
         files: [
           {

src/NavItem.jsx

@@ -22,19 +22,26 @@ var NavItem = React.createClass({
   },
 
   render: function () {
-    var classes = {
-      'active': this.props.active,
-      'disabled': this.props.disabled
-    };
+    var { 
+        disabled,
+        active,
+        href,
+        title,
+        children,
+        ...props } = this.props,
+        classes = {
+          'active': active,
+          'disabled': disabled
+        };
 
     return (
-      <li {...this.props} className={joinClasses(this.props.className, classSet(classes))}>
+      <li {...props} className={joinClasses(props.className, classSet(classes))}>
         <a
-          href={this.props.href}
-          title={this.props.title}
+          href={href}
+          title={title}
           onClick={this.handleClick}
           ref="anchor">
-          {this.props.children}
+          { children }
         </a>
       </li>
     );

test/NavItemSpec.jsx

@@ -34,6 +34,17 @@ describe('NavItem', function () {
     assert.equal(linkElement.title, 'content');
   });
 
+  it('Should not add anchor properties to li', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <NavItem href='/hi' title='boom!'>
+        Item content
+      </NavItem>
+    );
+
+    assert.ok(!instance.getDOMNode().hasAttribute('href'));
+    assert.ok(!instance.getDOMNode().hasAttribute('title'));
+  });
+
   it('Should call `onSelect` when item is selected', function (done) {
     function handleSelect(key) {
       assert.equal(key, '2');