Repository: react-materialize/react-materialize (js)

Issue:
Using id prop in dropdown(s) inside of navbar causes dropdowns to not function
### Description

When utilizing Navar items with dropdowns and defining the dropdown ids through prop.id the dropdowns fail to render (well... they DO render but...). This only happens with custom ids, when you let the generator randomly generate ids there is no issue 

The issue is that the rendered dropdowns are cloned into the navbar and into the sidenav this causes id conflicts and so react doesnt know what to do and so the original dropdowns don't render

See: https://github.com/react-materialize/react-materialize/blob/master/src/Navbar.js#L65
and
https://github.com/react-materialize/react-materialize/blob/master/src/Navbar.js#L88

### Steps to Reproduce

```
<Navbar>
    <Dropdown id="this-is-my-id" options={{hover: true, coverTrigger: false, autoTrigger: false, constrainWidth: false}} trigger={<a>Test</a>}</Dropdown>
</Navbar>
```

Try to navigate to a dropdown 

**Expected behavior:** Dropdowns should render when the trigger is activated

**Actual behavior:** The dropdowns dont render (because the dropdown ids in the navbar and mobile navbar conflict)

### Versions

**react-materialize:** 3.3.1
**materialize-css:** 1.0.0
**react:** 16.8.6

#### Thanks for helping out!


Pull request description:
Fix #876, clone sidenav elements and change their prop.id to append sidenav
# Description

If id is detected on child 'links' then use React.cloneElement and change the id to prefix sidenav onto it so it doesnt conflict with itself in the sidenav. See #876 for more information

## Type of change

Please delete options that are not relevant.

- [X] Bug fix (non-breaking change which fixes an issue)

# How Has This Been Tested?

I've tested this in my own environment to ensure the functionality still works as intended. It only affects children that have prop.id set.

# Checklist:

- [X] I have commented my code, particularly in hard-to-understand areas
- [X] My changes generate no new warnings
- [X] I have not generated a new package version. (the maintainers will handle that)


Patch:
diff --git a/src/Navbar.js b/src/Navbar.js
index 76d7947..c5a3083 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -45,7 +45,18 @@ class Navbar extends Component {
       <li key={index}>{link}</li>
     ));
 
-    const sidenavLinks = sidenav ? sidenav : links;
+    const sidenavLinks = sidenav
+      ? sidenav
+      : Children.map(children, (link, index) => {
+          const clonedLink =
+            link && link.props && link.props.id
+              ? React.cloneElement(link, {
+                  ...link.props,
+                  id: `sidenav-${link.props.id}`
+                })
+              : link;
+          return <li key={index}>{clonedLink}</li>;
+        });
 
     let navbar = (
       <nav className={navCSS}>


Test patch:
diff --git a/test/Navbar.spec.js b/test/Navbar.spec.js
index 0a588fb..dffad43 100644
--- a/test/Navbar.spec.js
+++ b/test/Navbar.spec.js
@@ -104,6 +104,16 @@ describe('<Navbar />', () => {
     expect(wrapper.find('.breadcrumb')).toHaveLength(3);
   });
 
+  test('can have children with custom ids', () => {
+    wrapper = shallow(
+      <Navbar>
+        <span id="custom-1">Custom 1</span>
+        <span id="custom-2">Custom 2</span>
+      </Navbar>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
   test('can have custom sidenav', () => {
     wrapper = shallow(
       <Navbar
diff --git a/test/__snapshots__/Navbar.spec.js.snap b/test/__snapshots__/Navbar.spec.js.snap
index 2e6995b..60aedb0 100644
--- a/test/__snapshots__/Navbar.spec.js.snap
+++ b/test/__snapshots__/Navbar.spec.js.snap
@@ -364,4 +364,71 @@ exports[`<Navbar /> can have custom sidenav 1`] = `
     </li>
   </ul>
 </Fragment>
+`;
+
+exports[`<Navbar /> can have children with custom ids 1`] = `
+<Fragment>
+  <nav
+    className=""
+  >
+    <div
+      className="nav-wrapper"
+    >
+      <a
+        className="sidenav-trigger"
+        data-target="mobile-nav"
+        href="#!"
+      >
+        <Icon>
+          menu
+        </Icon>
+      </a>
+      <ul
+        className="hide-on-med-and-down "
+      >
+        <li
+          key="0/.0"
+        >
+          <span
+            id="custom-1"
+          >
+            Custom 1
+          </span>
+        </li>
+        <li
+          key="1/.1"
+        >
+          <span
+            id="custom-2"
+          >
+            Custom 2
+          </span>
+        </li>
+      </ul>
+    </div>
+  </nav>
+  <ul
+    className="sidenav "
+    id="mobile-nav"
+  >
+    <li
+      key="0/.0"
+    >
+      <span
+        id="sidenav-custom-1"
+      >
+        Custom 1
+      </span>
+    </li>
+    <li
+      key="1/.1"
+    >
+      <span
+        id="sidenav-custom-2"
+      >
+        Custom 2
+      </span>
+    </li>
+  </ul>
+</Fragment>
 `;
\ No newline at end of file