fix: add uuid for unique id generation

package.json

@@ -33,7 +33,8 @@
     "@materialr/ripple": "^0.1.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
-    "react": "^16.2.0"
+    "react": "^16.2.0",
+    "uuid": "^3.2.1"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

src/index.jsx

@@ -2,6 +2,7 @@ import rippleFoundation from '@materialr/ripple';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import uuidv1 from 'uuid/v1';
 
 import '@material/checkbox/mdc-checkbox.scss';
 
@@ -16,7 +17,7 @@ class Checkbox extends React.Component {
     this.elementInput = undefined;
     this.elementRoot = undefined;
     this.rippleFoundation = undefined;
-    this.state = { classNames: [], classNamesRipple: [], cssVariables: {} };
+    this.state = { classNames: [], classNamesRipple: [], cssVariables: {}, id: uuidv1() };
     this.checkboxCreate = this.checkboxCreate.bind(this);
     this.checkboxDestroy = this.checkboxDestroy.bind(this);
     this.getClassNames = this.getClassNames.bind(this);
@@ -126,7 +127,7 @@ class Checkbox extends React.Component {
       rippleActivate,
       rippleDeactivate,
     } = this;
-    const id = new Date().getTime().toString();
+    const { id } = this.state;
     return (
       <Wrapper
         alignEnd={alignEnd}

src/index.test.jsx

@@ -29,6 +29,16 @@ test('Renders extra classNames that are passed in', () => {
   expect(actual).toBe(expected);
 });
 
+test('<Checkbox /> > Generates a unique id for each component', () => {
+  const wrapperFirst = mount(<Checkbox name={NAME} />);
+  const wrapperSecond = mount(<Checkbox name={NAME} />);
+
+  const actualIdFirst = wrapperFirst.find('.mdc-checkbox__native-control').props().id;
+  const actualIdsecond = wrapperSecond.find('.mdc-checkbox__native-control').props().id;
+
+  expect(actualIdFirst).not.toBe(actualIdsecond);
+});
+
 test('Does not add a ripple when it is disabled', () => {
   const wrapper = mount(<Checkbox name={NAME} />, { disableLifecycleMethods: true });
   const expected = undefined;