Merge pull request #3164 from matrix-org/t3chguy/fix_proptypes_mismatches

Fix some React errors

src/components/views/elements/EditableItemList.js

@@ -88,6 +88,7 @@ export class EditableItem extends React.Component {
 
 export default class EditableItemList extends React.Component {
     static propTypes = {
+        id: PropTypes.string.isRequired,
         items: PropTypes.arrayOf(PropTypes.string).isRequired,
         itemsLabel: PropTypes.string,
         noItemsLabel: PropTypes.string,
@@ -121,10 +122,8 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete={false}
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id="newEmailAddress" label={this.props.placeholder}
-                       type="text" autoComplete="off" value={this.props.newItem}
-                       onChange={this._onNewItemChanged}
-                />
+                <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
+                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary">
                     {_t("Add")}
                 </AccessibleButton>
@@ -135,11 +134,11 @@ export default class EditableItemList extends React.Component {
     render() {
         const editableItems = this.props.items.map((item, index) => {
             if (!this.props.canRemove) {
-                return <li>{item}</li>;
+                return <li key={item}>{item}</li>;
             }
 
             return <EditableItem
-                key={index}
+                key={item}
                 index={index}
                 value={item}
                 onRemove={this._onItemRemoved}

src/components/views/room_settings/AliasSettings.js

@@ -234,6 +234,7 @@ export default class AliasSettings extends React.Component {
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
                 <EditableItemList
+                    id="roomAliases"
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}
                     newItem={this.state.newAlias}

src/components/views/room_settings/RelatedGroupSettings.js

@@ -103,6 +103,7 @@ export default class RelatedGroupSettings extends React.Component {
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
             <EditableItemList
+                id="relatedGroups"
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}
                 newItem={this.state.newGroupId}

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -139,7 +139,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {minimizeToTrayOption}
                     {autoLaunchOption}
                     <Field id={"autocompleteDelay"} label={_t('Autocomplete delay (ms)')} type='number'
-                           value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay')}
+                           value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10)}
                            onChange={this._onAutocompleteDelayChange} />
                 </div>
             </div>