Repository: react-materialize/react-materialize
Pull request #1007 (2020-03-25 17:33:13)

Default id idgen
We want to use `idgen` as a default value for `id`, but this cannot be generated on each render, therefor we move it to defaultProps


Patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a74fc52..ba3d417 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+### 3.5.11
+
+- move id to defaultProps and use idgen
+
+### 3.5.10
+
+- integrate github actions as CI
+
 ### 3.5.9
 
 - Classnames: move back to dependencies #990
diff --git a/package-lock.json b/package-lock.json
index 836783b..f0c1fb6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-materialize",
-  "version": "3.5.10",
+  "version": "3.5.11",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 413a4a3..d2115f5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-materialize",
-  "version": "3.5.10",
+  "version": "3.5.11",
   "description": "Material design components for react",
   "main": "./lib/index.js",
   "files": [
diff --git a/src/Autocomplete.js b/src/Autocomplete.js
index e7ad3ee..2357a66 100644
--- a/src/Autocomplete.js
+++ b/src/Autocomplete.js
@@ -74,7 +74,6 @@ class Autocomplete extends Component {
       ...props
     } = this.props;
 
-    const _id = id || `autocomplete-${idgen()}`;
     const sizes = { s, m, l, xl };
     let classes = {
       col: true
@@ -93,7 +92,7 @@ class Autocomplete extends Component {
         <input
           placeholder={placeholder}
           className="autocomplete"
-          id={_id}
+          id={id}
           onChange={this._onChange}
           type="text"
           value={this.state.value}
@@ -101,7 +100,7 @@ class Autocomplete extends Component {
             this._autocomplete = input;
           }}
         />
-        <label htmlFor={_id}>{title}</label>
+        <label htmlFor={id}>{title}</label>
       </div>
     );
   }
@@ -111,6 +110,7 @@ Autocomplete.propTypes = {
   /**
    * Uniquely identifies <input> generated by this component
    * Used by corresponding <label> for attribute
+   * @default idgen()
    */
   id: PropTypes.string,
   className: PropTypes.string,
@@ -169,6 +169,7 @@ Autocomplete.propTypes = {
 };
 
 Autocomplete.defaultProps = {
+  id: `Autocomplete-${idgen()}`,
   options: {
     data: {},
     limit: Infinity,
diff --git a/src/Checkbox.js b/src/Checkbox.js
index b7fa0c8..84c2938 100644
--- a/src/Checkbox.js
+++ b/src/Checkbox.js
@@ -90,7 +90,7 @@ Checkbox.propTypes = {
 };
 
 Checkbox.defaultProps = {
-  id: `checkbox_${idgen()}`
+  id: `Checkbox_${idgen()}`
 };
 
 export default Checkbox;
diff --git a/src/DatePicker.js b/src/DatePicker.js
index 894720b..146d6db 100644
--- a/src/DatePicker.js
+++ b/src/DatePicker.js
@@ -4,16 +4,10 @@ import TextInput from './TextInput';
 import idgen from './idgen';
 
 class DatePicker extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.id = props.id || `datepicker${idgen()}`;
-  }
-
   componentDidMount() {
     if (typeof M !== 'undefined') {
-      const { onChange } = this.props;
-      const elem = document.getElementById(this.id);
+      const { onChange, id } = this.props;
+      const elem = document.getElementById(id);
       const options = onChange
         ? { ...this.props.options, onSelect: onChange }
         : this.props.options;
@@ -29,11 +23,7 @@ class DatePicker extends React.Component {
   }
 
   render() {
-    const { ...other } = this.props;
-
-    return (
-      <TextInput id={this.id} inputClassName="datepicker" {...this.props} />
-    );
+    return <TextInput inputClassName="datepicker" {...this.props} />;
   }
 }
 
@@ -44,6 +34,7 @@ DatePicker.propTypes = {
   onChange: PropTypes.func,
   /**
    * id passed to datepicker, also used for init method
+   * @default idgen()
    */
   id: PropTypes.string,
   /**
@@ -175,6 +166,7 @@ DatePicker.propTypes = {
 };
 
 DatePicker.defaultProps = {
+  id: `DatePicker-${idgen()}`,
   options: {
     autoClose: false,
     format: 'mmm dd, yyyy',
diff --git a/src/Dropdown.js b/src/Dropdown.js
index c838aed..af87aac 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -6,7 +6,6 @@ import cx from 'classnames';
 class Dropdown extends Component {
   constructor(props) {
     super(props);
-    this.idx = props.id || `dropdown${idgen()}`;
     this.renderTrigger = this.renderTrigger.bind(this);
     this.renderItems = this.renderItems.bind(this);
   }
@@ -36,11 +35,7 @@ class Dropdown extends Component {
     return (
       <Fragment>
         {this.renderTrigger()}
-        <ul
-          {...props}
-          className={cx('dropdown-content', className)}
-          id={this.idx}
-        >
+        <ul {...props} className={cx('dropdown-content', className)}>
           {this.renderItems()}
         </ul>
       </Fragment>
@@ -48,11 +43,11 @@ class Dropdown extends Component {
   }
 
   renderTrigger() {
-    const { trigger } = this.props;
+    const { trigger, id } = this.props;
 
     return cloneElement(trigger, {
-      'data-target': this.idx,
-      ref: t => (this._trigger = `[data-target=${this.idx}]`),
+      'data-target': id,
+      ref: t => (this._trigger = `[data-target=${id}]`),
       className: cx(trigger.props.className, 'dropdown-trigger')
     });
   }
@@ -71,6 +66,10 @@ class Dropdown extends Component {
 }
 
 Dropdown.propTypes = {
+  /*
+   * override id
+   * @default idgen()
+   */
   id: PropTypes.string,
   /**
    * The node to trigger the dropdown
@@ -101,6 +100,7 @@ Dropdown.propTypes = {
 };
 
 Dropdown.defaultProps = {
+  id: `Dropdown-${idgen()}`,
   options: {
     alignment: 'left',
     autoTrigger: true,
diff --git a/src/MediaBox.js b/src/MediaBox.js
index 2024c41..dbb60ae 100644
--- a/src/MediaBox.js
+++ b/src/MediaBox.js
@@ -5,20 +5,18 @@ import cx from 'classnames';
 import idgen from './idgen';
 
 const MediaBox = ({ id, options, children, className, caption, ...props }) => {
-  const _id = id || `mediabox${idgen()}`;
-
   useEffect(() => {
-    const instance = M.Materialbox.init(document.getElementById(_id), options);
+    const instance = M.Materialbox.init(document.getElementById(id), options);
 
     return () => {
       if (instance) {
         instance.destroy();
       }
     };
-  }, [_id, options]);
+  }, [id, options]);
 
   return React.cloneElement(children, {
-    id: _id,
+    id: id,
     className: cx('materialboxed', className),
     'data-caption': caption,
     ...props
@@ -27,6 +25,10 @@ const MediaBox = ({ id, options, children, className, caption, ...props }) => {
 
 MediaBox.propTypes = {
   children: PropTypes.node.isRequired,
+  /*
+   * override id
+   * @default idgen()
+   */
   id: PropTypes.string,
   className: PropTypes.string,
   /**
@@ -62,6 +64,7 @@ MediaBox.propTypes = {
 };
 
 MediaBox.defaultProps = {
+  id: `MediaBox_${idgen()}`,
   options: {
     inDuration: 275,
     outDuration: 200,
diff --git a/src/Modal.js b/src/Modal.js
index 074faf3..19faa3e 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -210,7 +210,7 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
-  id: `modal-${idgen()}`,
+  id: `Modal-${idgen()}`,
   options: {
     opacity: 0.5,
     inDuration: 250,
diff --git a/src/Select.js b/src/Select.js
index 1151a1e..e1c132e 100644
--- a/src/Select.js
+++ b/src/Select.js
@@ -8,16 +8,15 @@ class Select extends Component {
   constructor(props) {
     super(props);
 
-    this.id = props.id || idgen();
     this.handleChange = this.handleChange.bind(this);
     this.state = { value: props.value };
   }
 
   handleChange(event) {
-    const { onChange } = this.props;
+    const { onChange, multiple } = this.props;
     let value = event.target.value;
 
-    if (this.props.multiple) {
+    if (multiple) {
       value = this.instance.getSelectedValues();
     }
 
@@ -56,7 +55,6 @@ class Select extends Component {
       m,
       l,
       xl,
-      disabled,
       noLayout,
       browserDefault,
       icon,
@@ -84,9 +82,7 @@ class Select extends Component {
 
     const selectProps = {
       type: 'select',
-      id: this.id,
       value: this.state.value,
-      disabled,
       multiple,
       ...other
     };
@@ -243,6 +239,7 @@ Select.propTypes = {
 };
 
 Select.defaultProps = {
+  id: `Select-${idgen()}`,
   options: {
     classes: '',
     dropdownOptions: {
diff --git a/src/SideNav.js b/src/SideNav.js
index af8a122..a8427dc 100644
--- a/src/SideNav.js
+++ b/src/SideNav.js
@@ -15,7 +15,6 @@ const SideNav = ({
 }) => {
   const sidenavRef = useRef(null);
   const triggerRef = useRef(null);
-  const _id = id || `sidenav_${idgen()}`;
   const classNames = cx(
     'sidenav',
     { 'sidenav-fixed': fixed || !trigger },
@@ -40,17 +39,17 @@ const SideNav = ({
 
     return React.cloneElement(trigger, {
       ref: triggerRef,
-      'data-target': _id,
+      'data-target': id,
       className: classNames
     });
-  }, [_id, fixed, trigger]);
+  }, [id, fixed, trigger]);
 
   return (
     <Fragment>
       {renderTrigger}
       <ul
         ref={el => (sidenavRef.current = el)}
-        id={_id}
+        id={id}
         className={classNames}
         {...props}
       >
@@ -67,6 +66,7 @@ SideNav.propTypes = {
   fixed: PropTypes.bool,
   /**
    * sidenav id. If none is passed, an id will be generated.
+   * @default idgen()
    */
   id: PropTypes.string,
   /**
@@ -88,4 +88,8 @@ SideNav.propTypes = {
   children: PropTypes.node
 };
 
+SideNav.defaultProps = {
+  id: `SideNav-${idgen()}`
+};
+
 export default SideNav;
diff --git a/src/Switch.js b/src/Switch.js
index 75199c1..4467658 100644
--- a/src/Switch.js
+++ b/src/Switch.js
@@ -60,7 +60,7 @@ Switch.propTypes = {
 };
 
 Switch.defaultProps = {
-  id: `switch-${idgen()}`,
+  id: `Switch-${idgen()}`,
   onChange: () => {}
 };
 
diff --git a/src/TextInput.js b/src/TextInput.js
index 3a3c3d4..b45b879 100644
--- a/src/TextInput.js
+++ b/src/TextInput.js
@@ -5,8 +5,6 @@ import idgen from './idgen';
 import constants from './constants';
 
 const TextInput = props => {
-  const id = props.id || idgen();
-
   const inputRef = useRef(null);
 
   // eslint-disable-next-line react/prop-types
@@ -69,7 +67,6 @@ const TextInput = props => {
   const inputProps = {
     placeholder,
     type: computedType,
-    id: id,
     value,
     defaultValue,
     disabled,
@@ -226,4 +223,8 @@ TextInput.propTypes = {
   email: PropTypes.bool
 };
 
+TextInput.defaultProps = {
+  id: `TextInput-${idgen()}`
+};
+
 export default TextInput;
diff --git a/src/Textarea.js b/src/Textarea.js
index 21ad838..b00136b 100644
--- a/src/Textarea.js
+++ b/src/Textarea.js
@@ -196,4 +196,8 @@ Textarea.propTypes = {
   onChange: PropTypes.func
 };
 
+Textarea.defaultProps = {
+  id: `Textarea-${idgen()}`
+};
+
 export default Textarea;
diff --git a/src/TimePicker.js b/src/TimePicker.js
index 1fc21a2..d32fd81 100644
--- a/src/TimePicker.js
+++ b/src/TimePicker.js
@@ -4,16 +4,10 @@ import TextInput from './TextInput';
 import idgen from './idgen';
 
 class TimePicker extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.id = props.id || `timepicker${idgen()}`;
-  }
-
   componentDidMount() {
     if (typeof M !== 'undefined') {
-      const { onChange } = this.props;
-      const elem = document.getElementById(this.id);
+      const { onChange, id } = this.props;
+      const elem = document.getElementById(id);
       const options = onChange
         ? { ...this.props.options, onSelect: onChange }
         : this.props.options;
@@ -29,9 +23,7 @@ class TimePicker extends React.Component {
   }
 
   render() {
-    return (
-      <TextInput id={this.id} inputClassName="timepicker" {...this.props} />
-    );
+    return <TextInput inputClassName="timepicker" {...this.props} />;
   }
 }
 
@@ -42,6 +34,7 @@ TimePicker.propTypes = {
   onChange: PropTypes.func,
   /**
    * id passed to Timepicker, also used for init method
+   * @default idgen()
    */
   id: PropTypes.string,
   /**
@@ -127,6 +120,7 @@ TimePicker.propTypes = {
 };
 
 TimePicker.defaultProps = {
+  id: `TimePicker-${idgen()}`,
   options: {
     duration: 350,
     container: null,
diff --git a/stories/TextInput.stories.js b/stories/TextInput.stories.js
index e9878c5..7f1c186 100644
--- a/stories/TextInput.stories.js
+++ b/stories/TextInput.stories.js
@@ -46,9 +46,7 @@ stories.add('Email validate', () => (
   />
 ));
 
-stories.add('File type', () => (
-  <TextInput type="file" label="File" />
-));
+stories.add('File type', () => <TextInput type="file" label="File" />);
 
 stories.add(
   'Character Counter',


Test patch:
diff --git a/test/__snapshots__/Checkbox.spec.js.snap b/test/__snapshots__/Checkbox.spec.js.snap
index 67e1663..eb26c7d 100644
--- a/test/__snapshots__/Checkbox.spec.js.snap
+++ b/test/__snapshots__/Checkbox.spec.js.snap
@@ -4,16 +4,16 @@ exports[`<Checkbox /> does not overwrite materialize-css classnames 1`] = `
 <Checkbox
   className="my-class"
   filledIn={true}
-  id="checkbox_mockId"
+  id="Checkbox_mockId"
   label="red"
   value="red"
 >
   <label
-    htmlFor="checkbox_mockId"
+    htmlFor="Checkbox_mockId"
   >
     <input
       className="filled-in my-class"
-      id="checkbox_mockId"
+      id="Checkbox_mockId"
       onChange={[Function]}
       type="checkbox"
       value="red"
@@ -27,11 +27,11 @@ exports[`<Checkbox /> does not overwrite materialize-css classnames 1`] = `
 
 exports[`<Checkbox /> filled-in 1`] = `
 <label
-  htmlFor="checkbox_mockId"
+  htmlFor="Checkbox_mockId"
 >
   <input
     className="filled-in"
-    id="checkbox_mockId"
+    id="Checkbox_mockId"
     onChange={[Function]}
     type="checkbox"
     value="red"
@@ -44,11 +44,11 @@ exports[`<Checkbox /> filled-in 1`] = `
 
 exports[`<Checkbox /> renders 1`] = `
 <label
-  htmlFor="checkbox_mockId"
+  htmlFor="Checkbox_mockId"
 >
   <input
     className=""
-    id="checkbox_mockId"
+    id="Checkbox_mockId"
     onChange={[Function]}
     type="checkbox"
     value="red"
@@ -61,12 +61,12 @@ exports[`<Checkbox /> renders 1`] = `
 
 exports[`<Checkbox /> renders disabled 1`] = `
 <label
-  htmlFor="checkbox_mockId"
+  htmlFor="Checkbox_mockId"
 >
   <input
     className=""
     disabled={true}
-    id="checkbox_mockId"
+    id="Checkbox_mockId"
     onChange={[Function]}
     type="checkbox"
     value="red"
diff --git a/test/__snapshots__/DatePicker.spec.js.snap b/test/__snapshots__/DatePicker.spec.js.snap
index dd3d80e..ef2887f 100644
--- a/test/__snapshots__/DatePicker.spec.js.snap
+++ b/test/__snapshots__/DatePicker.spec.js.snap
@@ -96,7 +96,7 @@ exports[`<DatePicker /> accepts external \`id\` value 1`] = `
 
 exports[`<DatePicker /> renders 1`] = `
 <TextInput
-  id="datepickermockId"
+  id="DatePicker-mockId"
   inputClassName="datepicker"
   options={
     Object {
@@ -190,7 +190,7 @@ exports[`<DatePicker /> renders 1`] = `
 
 exports[`<DatePicker /> renders with a label 1`] = `
 <TextInput
-  id="datepickermockId"
+  id="DatePicker-mockId"
   inputClassName="datepicker"
   label="DatePicker label"
   options={
diff --git a/test/__snapshots__/DropdownButton.spec.js.snap b/test/__snapshots__/DropdownButton.spec.js.snap
index 96ad5d2..ddc34f0 100644
--- a/test/__snapshots__/DropdownButton.spec.js.snap
+++ b/test/__snapshots__/DropdownButton.spec.js.snap
@@ -4,13 +4,13 @@ exports[`<Dropdown /> renders 1`] = `
 <Fragment>
   <button
     className="dropdown-trigger"
-    data-target="dropdownmockId"
+    data-target="Dropdown-mockId"
   >
     Drop me!
   </button>
   <ul
     className="dropdown-content"
-    id="dropdownmockId"
+    id="Dropdown-mockId"
   />
 </Fragment>
 `;
diff --git a/test/__snapshots__/MediaBox.spec.js.snap b/test/__snapshots__/MediaBox.spec.js.snap
index 6f860db..e2dd0c9 100644
--- a/test/__snapshots__/MediaBox.spec.js.snap
+++ b/test/__snapshots__/MediaBox.spec.js.snap
@@ -5,7 +5,7 @@ exports[`<MediaBox /> renders 1`] = `
   alt=""
   className="materialboxed more"
   data-caption="A demo media box1"
-  id="mediaboxmockId"
+  id="MediaBox_mockId"
   src="image.jpg"
   width="650"
 />
diff --git a/test/__snapshots__/Modal.spec.js.snap b/test/__snapshots__/Modal.spec.js.snap
index f8761d3..afd027d 100644
--- a/test/__snapshots__/Modal.spec.js.snap
+++ b/test/__snapshots__/Modal.spec.js.snap
@@ -17,7 +17,7 @@ exports[`<Modal /> renders a modal has children 1`] = `
   bottomSheet={false}
   fixedFooter={false}
   header="Modal header"
-  id="modal-mockId"
+  id="Modal-mockId"
   options={
     Object {
       "dismissible": true,
@@ -40,7 +40,7 @@ exports[`<Modal /> renders a modal has children 1`] = `
       <div>
         <div
           class="modal"
-          id="modal-mockId"
+          id="Modal-mockId"
         >
           <div
             class="modal-content"
@@ -69,7 +69,7 @@ exports[`<Modal /> renders a modal has children 1`] = `
   >
     <div
       className="modal"
-      id="modal-mockId"
+      id="Modal-mockId"
     >
       <div
         className="modal-content"
@@ -123,7 +123,7 @@ exports[`<Modal /> renders a trigger renders 1`] = `
   bottomSheet={false}
   fixedFooter={false}
   header="Modal header"
-  id="modal-mockId"
+  id="Modal-mockId"
   options={
     Object {
       "dismissible": true,
@@ -146,7 +146,7 @@ exports[`<Modal /> renders a trigger renders 1`] = `
       <div>
         <div
           class="modal"
-          id="modal-mockId"
+          id="Modal-mockId"
         >
           <div
             class="modal-content"
@@ -175,7 +175,7 @@ exports[`<Modal /> renders a trigger renders 1`] = `
   >
     <div
       className="modal"
-      id="modal-mockId"
+      id="Modal-mockId"
     >
       <div
         className="modal-content"
@@ -228,7 +228,7 @@ exports[`<Modal /> without a trigger renders 1`] = `
   }
   bottomSheet={false}
   fixedFooter={false}
-  id="modal-mockId"
+  id="Modal-mockId"
   options={
     Object {
       "dismissible": true,
@@ -241,7 +241,7 @@ exports[`<Modal /> without a trigger renders 1`] = `
       <div>
         <div
           class="modal"
-          id="modal-mockId"
+          id="Modal-mockId"
         >
           <div
             class="modal-content"
@@ -268,7 +268,7 @@ exports[`<Modal /> without a trigger renders 1`] = `
   >
     <div
       className="modal"
-      id="modal-mockId"
+      id="Modal-mockId"
     >
       <div
         className="modal-content"
diff --git a/test/__snapshots__/SearchForm.spec.js.snap b/test/__snapshots__/SearchForm.spec.js.snap
index 4085cbd..100d79f 100644
--- a/test/__snapshots__/SearchForm.spec.js.snap
+++ b/test/__snapshots__/SearchForm.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`<SearchForm /> should render 1`] = `
 <form>
   <TextInput
+    id="TextInput-mockId"
     label={
       <Icon>
         search
diff --git a/test/__snapshots__/Select.spec.js.snap b/test/__snapshots__/Select.spec.js.snap
index 8a8cb73..3587c2d 100644
--- a/test/__snapshots__/Select.spec.js.snap
+++ b/test/__snapshots__/Select.spec.js.snap
@@ -9,7 +9,7 @@ exports[`<Select /> with icon 1`] = `
   />
   <select
     className=""
-    id="mockId"
+    id="Select-mockId"
     onChange={[Function]}
     options={
       Object {
diff --git a/test/__snapshots__/SideNav.spec.js.snap b/test/__snapshots__/SideNav.spec.js.snap
index c6379e3..9257ca7 100644
--- a/test/__snapshots__/SideNav.spec.js.snap
+++ b/test/__snapshots__/SideNav.spec.js.snap
@@ -3,6 +3,7 @@
 exports[`<SideNav /> can be \`fixed\` 1`] = `
 <SideNav
   fixed={true}
+  id="SideNav-mockId"
   trigger={
     <button
       className="trigger"
@@ -13,28 +14,31 @@ exports[`<SideNav /> can be \`fixed\` 1`] = `
 >
   <button
     className="trigger hide-on-large-only sidenav-trigger"
-    data-target="sidenav_mockId"
+    data-target="SideNav-mockId"
   >
     Show sidenav
   </button>
   <ul
     className="sidenav sidenav-fixed"
-    id="sidenav_mockId"
+    id="SideNav-mockId"
   />
 </SideNav>
 `;
 
 exports[`<SideNav /> is \`fixed\` if no trigger is passed 1`] = `
-<SideNav>
+<SideNav
+  id="SideNav-mockId"
+>
   <ul
     className="sidenav sidenav-fixed"
-    id="sidenav_mockId"
+    id="SideNav-mockId"
   />
 </SideNav>
 `;
 
 exports[`<SideNav /> renders 1`] = `
 <SideNav
+  id="SideNav-mockId"
   trigger={
     <button
       className="trigger"
@@ -45,13 +49,13 @@ exports[`<SideNav /> renders 1`] = `
 >
   <button
     className="trigger show-on-large sidenav-trigger"
-    data-target="sidenav_mockId"
+    data-target="SideNav-mockId"
   >
     Show sidenav
   </button>
   <ul
     className="sidenav"
-    id="sidenav_mockId"
+    id="SideNav-mockId"
   />
 </SideNav>
 `;
@@ -82,6 +86,7 @@ exports[`<SideNav /> renders 2`] = `
 
 exports[`<SideNav /> renders children 1`] = `
 <SideNav
+  id="SideNav-mockId"
   trigger={
     <button
       className="trigger"
@@ -92,13 +97,13 @@ exports[`<SideNav /> renders children 1`] = `
 >
   <button
     className="trigger show-on-large sidenav-trigger"
-    data-target="sidenav_mockId"
+    data-target="SideNav-mockId"
   >
     Show sidenav
   </button>
   <ul
     className="sidenav"
-    id="sidenav_mockId"
+    id="SideNav-mockId"
   >
     <span
       className="test-child"
diff --git a/test/__snapshots__/Switch.spec.js.snap b/test/__snapshots__/Switch.spec.js.snap
index 0c908f2..eae24b9 100644
--- a/test/__snapshots__/Switch.spec.js.snap
+++ b/test/__snapshots__/Switch.spec.js.snap
@@ -5,11 +5,11 @@ exports[`<Switch /> renders 1`] = `
   className="switch"
 >
   <label
-    htmlFor="switch-mockId"
+    htmlFor="Switch-mockId"
   >
     Off
     <input
-      id="switch-mockId"
+      id="Switch-mockId"
       onChange={[Function]}
       type="checkbox"
     />
diff --git a/test/__snapshots__/TextInput.spec.js.snap b/test/__snapshots__/TextInput.spec.js.snap
index e1bf740..55d2f31 100644
--- a/test/__snapshots__/TextInput.spec.js.snap
+++ b/test/__snapshots__/TextInput.spec.js.snap
@@ -12,7 +12,7 @@ exports[`<TextInput /> handles file type 1`] = `
     </span>
     <input
       className=""
-      id="mockId"
+      id="TextInput-mockId"
       type="file"
     />
   </div>
diff --git a/test/__snapshots__/Textarea.spec.js.snap b/test/__snapshots__/Textarea.spec.js.snap
index 5e8b02e..9f3574e 100644
--- a/test/__snapshots__/Textarea.spec.js.snap
+++ b/test/__snapshots__/Textarea.spec.js.snap
@@ -7,7 +7,7 @@ exports[`<Textarea /> Disabled 1`] = `
   <textarea
     className="materialize-textarea"
     disabled={true}
-    id="mockId"
+    id="Textarea-mockId"
     value="I was here"
   />
   <span
@@ -25,7 +25,7 @@ exports[`<Textarea /> Icon 1`] = `
   />
   <textarea
     className="materialize-textarea"
-    id="mockId"
+    id="Textarea-mockId"
   />
   <span
     className="helper-text"
@@ -39,11 +39,11 @@ exports[`<Textarea /> Label 1`] = `
 >
   <textarea
     className="materialize-textarea"
-    id="mockId"
+    id="Textarea-mockId"
   />
   <label
     className=""
-    htmlFor="mockId"
+    htmlFor="Textarea-mockId"
   >
     Write something here...
   </label>
@@ -59,7 +59,7 @@ exports[`<Textarea /> Placeholder 1`] = `
 >
   <textarea
     className="materialize-textarea"
-    id="mockId"
+    id="Textarea-mockId"
     placeholder="I was here"
   />
   <span
@@ -74,7 +74,7 @@ exports[`<Textarea /> Textarea 1`] = `
 >
   <textarea
     className="materialize-textarea"
-    id="mockId"
+    id="Textarea-mockId"
   />
   <span
     className="helper-text"
diff --git a/test/__snapshots__/TimePicker.spec.js.snap b/test/__snapshots__/TimePicker.spec.js.snap
index a14596b..247b9e8 100644
--- a/test/__snapshots__/TimePicker.spec.js.snap
+++ b/test/__snapshots__/TimePicker.spec.js.snap
@@ -31,7 +31,7 @@ exports[`<TimePicker /> accepts external \`id\` value 1`] = `
 
 exports[`<TimePicker /> renders 1`] = `
 <TextInput
-  id="timepickermockId"
+  id="TimePicker-mockId"
   inputClassName="timepicker"
   options={
     Object {
@@ -60,7 +60,7 @@ exports[`<TimePicker /> renders 1`] = `
 
 exports[`<TimePicker /> renders with a label 1`] = `
 <TextInput
-  id="timepickermockId"
+  id="TimePicker-mockId"
   inputClassName="timepicker"
   label="TimePicker label"
   options={