Merge pull request #569 from rgarmsen2295/fix-react-key-warnings

Fixed some react warnings involving missing keys in render arrays

7 files changed, 34 insertions, 9 deletions

diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index 9c8e7c6c3..a080150dd 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -89,7 +89,10 @@ export default class AccessHistoryModal extends React.Component {
             }
 
             accessList[i] = (
-                <div className='access-history__table'>
+                <div
+                    key={'accessHistoryEntryKey' + i}
+                    className='access-history__table'
+                >
                     <div className='access__date'>{newDate}</div>
                     <div className='access__report'>
                         <div className='report__time'>{newHistoryDate.toLocaleTimeString(navigator.language, {hour: '2-digit', minute: '2-digit'})}</div>
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 2a83b3c40..7cbd4021e 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -102,7 +102,10 @@ export default class ActivityLogModal extends React.Component {
             }
 
             activityList[i] = (
-                <div className='activity-log__table'>
+                <div
+                    key={'activityLogEntryKey' + i}
+                    className='activity-log__table'
+                >
                     <div className='activity-log__report'>
                         <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div>
                         <div className='report__info'>
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index d6cf4f9d6..2258bf2b3 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -274,6 +274,7 @@ export default class Navbar extends React.Component {
         if (currentId == null) {
             buttons.push(
                 <button
+                    key='navbar-toggle-collapse'
                     type='button'
                     className='navbar-toggle'
                     data-toggle='collapse'
@@ -288,6 +289,7 @@ export default class Navbar extends React.Component {
         } else {
             buttons.push(
                 <button
+                    key='navbar-toggle-sidebar'
                     type='button'
                     className='navbar-toggle'
                     data-toggle='collapse'
@@ -304,6 +306,7 @@ export default class Navbar extends React.Component {
 
             buttons.push(
                 <button
+                    key='navbar-toggle-menu'
                     type='button'
                     className='navbar-toggle menu-toggle pull-right'
                     data-toggle='collapse'
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 67d21f67a..c5db3956d 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -518,7 +518,7 @@ export default class PostList extends React.Component {
 
             var postCtl = (
                 <Post
-                    key={post.id}
+                    key={post.id + 'postKey'}
                     ref={post.id}
                     sameUser={sameUser}
                     sameRoot={sameRoot}
diff --git a/web/react/components/rhs_thread.jsx b/web/react/components/rhs_thread.jsx
index dbb16872e..d99177bda 100644
--- a/web/react/components/rhs_thread.jsx
+++ b/web/react/components/rhs_thread.jsx
@@ -191,7 +191,7 @@ export default class RhsThread extends React.Component {
                             return (
                                 <Comment
                                     ref={comPost.id}
-                                    key={comPost.id}
+                                    key={comPost.id + 'commentKey'}
                                     post={comPost}
                                     selected={(comPost.id === selectedPost.id)}
                                 />
diff --git a/web/react/components/user_settings_appearance.jsx b/web/react/components/user_settings_appearance.jsx
index 55ccc8efb..3afdd7349 100644
--- a/web/react/components/user_settings_appearance.jsx
+++ b/web/react/components/user_settings_appearance.jsx
@@ -90,6 +90,7 @@ export default class UserSettingsAppearance extends React.Component {
                 for (var i = 0; i < config.ThemeColors.length; i++) {
                     themeButtons.push(
                         <button
+                            key={config.ThemeColors[i] + 'key' + i}
                             ref={config.ThemeColors[i]}
                             type='button'
                             className='btn btn-lg color-btn'
@@ -102,7 +103,10 @@ export default class UserSettingsAppearance extends React.Component {
                 var inputs = [];
 
                 inputs.push(
-                    <li className='setting-list-item'>
+                    <li
+                        key='themeColorSetting'
+                        className='setting-list-item'
+                    >
                         <div
                             className='btn-group'
                             data-toggle='buttons-radio'
diff --git a/web/react/components/user_settings_security.jsx b/web/react/components/user_settings_security.jsx
index a9f62097a..d83151cd8 100644
--- a/web/react/components/user_settings_security.jsx
+++ b/web/react/components/user_settings_security.jsx
@@ -113,7 +113,10 @@ export default class SecurityTab extends React.Component {
 
             if (this.props.user.auth_service === '') {
                 inputs.push(
-                    <div className='form-group'>
+                    <div
+                        key='currentPasswordUpdateForm'
+                        className='form-group'
+                    >
                         <label className='col-sm-5 control-label'>Current Password</label>
                         <div className='col-sm-7'>
                             <input
@@ -126,7 +129,10 @@ export default class SecurityTab extends React.Component {
                     </div>
                 );
                 inputs.push(
-                    <div className='form-group'>
+                    <div
+                        key='newPasswordUpdateForm'
+                        className='form-group'
+                    >
                         <label className='col-sm-5 control-label'>New Password</label>
                         <div className='col-sm-7'>
                             <input
@@ -139,7 +145,10 @@ export default class SecurityTab extends React.Component {
                     </div>
                 );
                 inputs.push(
-                    <div className='form-group'>
+                    <div
+                        key='retypeNewPasswordUpdateForm'
+                        className='form-group'
+                    >
                         <label className='col-sm-5 control-label'>Retype New Password</label>
                         <div className='col-sm-7'>
                             <input
@@ -155,7 +164,10 @@ export default class SecurityTab extends React.Component {
                 submit = this.submitPassword;
             } else {
                 inputs.push(
-                    <div className='form-group'>
+                    <div
+                        key='oauthPasswordInfo'
+                        className='form-group'
+                    >
                         <label className='col-sm-12'>Log in occurs through GitLab. Please see your GitLab account settings page to update your password.</label>
                     </div>
                 );