fix: Dialog Settings react duplication key warning

TimSusa · Sep 20, 2020 · fe39e92 · fe39e92
1 parent dab8d00
commit fe39e92
Show file tree

Hide file tree

Showing 3 changed files with 274 additions and 236 deletions.
diff --git a/packages/midi-bricks/src/components/midi-settings/elements/InputNoteOrCc.jsx b/packages/midi-bricks/src/components/midi-settings/elements/InputNoteOrCc.jsx
@@ -15,7 +15,7 @@ import { suggestionsMidiNoteCC, suggestionsMidiCc } from './suggestions'
 InputNoteOrCc.propTypes = {
   i: PropTypes.string,
   lastFocusedPage: PropTypes.string,
-  midiCC: PropTypes.array.isRequired,
+  midiCC: PropTypes.array,
   type: PropTypes.string,
   yMidiCc: PropTypes.array
 }
@@ -64,7 +64,7 @@ function InputNoteOrCc(props) {
           id='number'
           type='number'
           name={`input-prgChange-name-${i}`}
-          value={midiCC[0] || 0}
+          value={(midiCC && midiCC[0]) || 0}
           onChange={handleProgramChange}
         />
       </FormControl>

diff --git a/packages/midi-bricks/src/components/midi-settings/elements/MidiSuggestedInput.jsx b/packages/midi-bricks/src/components/midi-settings/elements/MidiSuggestedInput.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import keycode from 'keycode'
 import Downshift from 'downshift'
+import { uniqueId } from 'lodash'
 import { makeStyles, useTheme } from '@material-ui/styles'
 import TextField from '@material-ui/core/TextField'
 
@@ -34,6 +35,7 @@ function MidiSuggestedInput(props) {
 
   return (
     <Downshift
+      key={`${i}-dwnshift`}
       inputValue={inputValue}
       onChange={handleChange.bind(
         this,
@@ -61,7 +63,7 @@ function MidiSuggestedInput(props) {
             InputProps: getInputProps({
               startAdornment: selectedItem.map((item) => (
                 <Chip
-                  key={item}
+                  key={`${i}-dwn-in-${uniqueId()}`}
                   tabIndex={-1}
                   label={item}
                   className={classes.chip}
@@ -84,7 +86,7 @@ function MidiSuggestedInput(props) {
                 selectedItem,
                 setSelectedItem
               ),
-              id: 'integration-downshift-multiple'
+              id: `integration-downshift-multiple-${i}-${uniqueId()}`
             })
           })}
           {isOpen ? (