Repository: react-materialize/react-materialize
Pull request #785 (2019-03-24 11:45:10)

Remove li wrapper from <NavItem />
Before NavItem was wrapper in an li, now it's up to the consumer to wrap it in any node


Patch:
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 40b026d..4cb65aa 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -16,7 +16,7 @@ class Dropdown extends Component {
 
     if (typeof M !== undefined) {
       const selector = document.querySelectorAll(this._trigger);
-      this.instance = M.Dropdown.init(selector, options)[0];
+      this.instance = M.Dropdown.init(selector, options);
     }
   }
 
diff --git a/src/NavItem.js b/src/NavItem.js
index 471a0a8..9a484ad 100644
--- a/src/NavItem.js
+++ b/src/NavItem.js
@@ -1,14 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const NavItem = ({ divider, children, href = '', onClick, ...props }) => {
+const NavItem = ({ divider, ...props }) => {
   if (divider) return <li className="divider" />;
-  const a = onClick ? (
-    <a onClick={onClick}>{children}</a>
-  ) : (
-    <a href={href}>{children}</a>
-  );
-  return <li {...props}>{a}</li>;
+  return <a {...props} />;
 };
 
 NavItem.propTypes = {


Test patch:
diff --git a/test/DropdownButton.spec.js b/test/DropdownButton.spec.js
index 0db2491..60274a3 100644
--- a/test/DropdownButton.spec.js
+++ b/test/DropdownButton.spec.js
@@ -43,7 +43,7 @@ describe('<Dropdown />', () => {
     const dropdownMock = {
       init: (el, options) => {
         dropdownInitMock(options);
-        return [{ destroy: dropdownInstanceDestroyMock }];
+        return { destroy: dropdownInstanceDestroyMock };
       }
     };
 
diff --git a/test/NavItem.spec.js b/test/NavItem.spec.js
index 50029a6..236db37 100644
--- a/test/NavItem.spec.js
+++ b/test/NavItem.spec.js
@@ -11,16 +11,6 @@ describe('<NavItem />', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  test('passes className to first node', () => {
-    wrapper = shallow(
-      <NavItem className="red" href="get-started.html">
-        Getting
-      </NavItem>
-    );
-
-    expect(wrapper.find('li.red')).toHaveLength(1);
-  });
-
   test('passes node as a child', () => {
     wrapper = shallow(
       <NavItem href="get-started.html">
@@ -51,27 +41,13 @@ describe('<NavItem />', () => {
 
   test('passes onClick as parameter', () => {
     const onClick = jest.fn();
-    wrapper = shallow(
-      <NavItem onClick={onClick} href="get-started.html">
-        Getting
-      </NavItem>
-    );
+    wrapper = shallow(<NavItem onClick={onClick}>Getting</NavItem>);
 
     expect(wrapper).toMatchSnapshot();
 
-    wrapper
-      .children()
-      .at(0)
-      .simulate('click');
+    wrapper.simulate('click');
 
     expect(onClick).toHaveBeenCalled();
-
-    expect(
-      wrapper
-        .children()
-        .at(0)
-        .prop('href')
-    ).toBeUndefined();
   });
 
   test('passes href as parameter', () => {
diff --git a/test/__snapshots__/NavItem.spec.js.snap b/test/__snapshots__/NavItem.spec.js.snap
index 7c09ca3..b49671f 100644
--- a/test/__snapshots__/NavItem.spec.js.snap
+++ b/test/__snapshots__/NavItem.spec.js.snap
@@ -1,43 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<NavItem /> passes href as parameter 1`] = `
-<li>
-  <a
-    href="get-started.html"
-  >
-    Getting
-  </a>
-</li>
+<a
+  href="get-started.html"
+>
+  Getting
+</a>
 `;
 
 exports[`<NavItem /> passes node as a child 1`] = `
-<li>
-  <a
-    href="get-started.html"
-  >
-    <p>
-      Go Home
-    </p>
-  </a>
-</li>
+<a
+  href="get-started.html"
+>
+  <p>
+    Go Home
+  </p>
+</a>
 `;
 
 exports[`<NavItem /> passes onClick as parameter 1`] = `
-<li>
-  <a
-    onClick={[MockFunction]}
-  >
-    Getting
-  </a>
-</li>
+<a
+  onClick={[MockFunction]}
+>
+  Getting
+</a>
 `;
 
 exports[`<NavItem /> renders 1`] = `
-<li>
-  <a
-    href="get-started.html"
-  >
-    Getting
-  </a>
-</li>
+<a
+  href="get-started.html"
+>
+  Getting
+</a>
 `;