Use a fragment instead of returning an array for the TimeInput.

Author: leMaik

src/TimeInput.js

@@ -78,14 +78,14 @@ class TimeInput extends React.Component {
       autoOk,
       cancelLabel,
       classes,
-      defaultValue, // eslint-disable-line
+      defaultValue,
       disabled: disabledProp,
-      initialTime, //eslint-disable-line
-      placeholder, // eslint-disable-line
+      initialTime,
+      placeholder,
       mode,
       okLabel,
-      onChange, // eslint-disable-line
-      value: valueProp, // eslint-disable-line
+      onChange,
+      value: valueProp,
       ...other
     } = this.props
 
@@ -94,34 +94,34 @@ class TimeInput extends React.Component {
     const { muiFormControl } = this.context
     const disabled = disabledProp || (muiFormControl != null && muiFormControl.disabled)
 
-    return [
-      <Input
-        {...other}
-        disabled={disabled}
-        onClick={!disabled ? this.showDialog : null}
-        value={this.getFormattedValue()}
-        readOnly
-        key='TimeInput-input'
-      />,
-      <Dialog
-        maxWidth='xs'
-        open={this.state.open}
-        key='TimeInput-dialog'
-        onClose={this.handleCancel}
-      >
-        <TimePicker
-          mode={mode}
-          value={newValue}
-          onChange={this.handleChange}
-          onMinutesSelected={autoOk ? this.handleOk : null}
-          classes={{ header: classes.header, body: classes.body }}
+    return (
+      <React.Fragment>
+        <Input
+          {...other}
+          disabled={disabled}
+          onClick={!disabled ? this.showDialog : null}
+          value={this.getFormattedValue()}
+          readOnly
         />
-        <DialogActions>
-          <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
-          <Button onClick={this.handleOk} color='primary'>{okLabel}</Button>
-        </DialogActions>
-      </Dialog>
-    ]
+        <Dialog
+          maxWidth='xs'
+          open={this.state.open}
+          onClose={this.handleCancel}
+        >
+          <TimePicker
+            mode={mode}
+            value={newValue}
+            onChange={this.handleChange}
+            onMinutesSelected={autoOk ? this.handleOk : null}
+            classes={{ header: classes.header, body: classes.body }}
+          />
+          <DialogActions>
+            <Button onClick={this.handleCancel} color='primary'>{cancelLabel}</Button>
+            <Button onClick={this.handleOk} color='primary'>{okLabel}</Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    )
   }
 }
 

src/__snapshots__/TimeInput.spec.js.snap

@@ -20,7 +20,6 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
   >
     <WithStyles(Input)
       disabled={false}
-      key="TimeInput-input"
       onClick={[Function]}
       readOnly={true}
       value="1:37 pm"
@@ -70,7 +69,6 @@ exports[`<TimeInput /> 12h matches the snapshot 1`] = `
       </Input>
     </WithStyles(Input)>
     <WithStyles(Dialog)
-      key="TimeInput-dialog"
       maxWidth="xs"
       onClose={[Function]}
       open={false}
@@ -182,7 +180,6 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
   >
     <WithStyles(Input)
       disabled={false}
-      key="TimeInput-input"
       onClick={[Function]}
       readOnly={true}
       value="13:37"
@@ -232,7 +229,6 @@ exports[`<TimeInput /> 24h matches the snapshot 1`] = `
       </Input>
     </WithStyles(Input)>
     <WithStyles(Dialog)
-      key="TimeInput-dialog"
       maxWidth="xs"
       onClose={[Function]}
       open={false}