Fix missed key props on react components, #1507

publishpress · Dec 15, 2023 · c858139 · c858139
1 parent 51e1e5e
commit c858139
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 19 deletions.
diff --git a/modules/calendar/lib/async-calendar/js/AsyncCalendar.jsx b/modules/calendar/lib/async-calendar/js/AsyncCalendar.jsx
@@ -15,7 +15,7 @@ export default function AsyncCalendar(props) {
     let statusValue   = (props.requestFilter.post_status) ? props.requestFilter.post_status : '';
     let typesValue    = (props.requestFilter.post_type) ? props.requestFilter.post_type : '';
     let weeksValue    = (props.requestFilter.weeks) ? props.requestFilter.weeks : props.numberOfWeeksToDisplay;
-    
+
     let categoryValue   = '';
     if (props.requestFilter.category && props.requestFilter.category.value) {
         categoryValue   = props.requestFilter.category.value;
@@ -25,12 +25,12 @@ export default function AsyncCalendar(props) {
     if (props.requestFilter.post_tag && props.requestFilter.post_tag.value) {
         postTagValue   = props.requestFilter.post_tag.value;
     }
-    
+
     let authorValue   = '';
     if (props.requestFilter.post_author && props.requestFilter.post_author.value) {
         authorValue = props.requestFilter.post_author.value;
     }
-    
+
     const [firstDateToDisplay, setFirstDateToDisplay] = React.useState(getBeginDateOfWeekByDate(props.firstDateToDisplay, props.weekStartsOnSunday));
     const [numberOfWeeksToDisplay, setNumberOfWeeksToDisplay] = React.useState(weeksValue);
     const [itemsByDate, setItemsByDate] = React.useState(props.items);
@@ -454,7 +454,7 @@ export default function AsyncCalendar(props) {
             if (dayIndexInTheRow === 7) {
                 dayIndexInTheRow = 0;
                 tableRows.push(
-                    <tr>{rowCells}</tr>
+                    <tr key={`calendar-row-${tableRows.length}`}>{rowCells}</tr>
                 );
             }
 

diff --git a/modules/calendar/lib/async-calendar/js/Functions.jsx b/modules/calendar/lib/async-calendar/js/Functions.jsx
@@ -136,9 +136,9 @@ export function getDateWithNoTimezoneOffset(dateString) {
 
 export function getPostLinksElement(linkData, handleOnClick) {
     if (linkData.url) {
-        return (<a href={linkData.url}>{linkData.label}</a>);
+        return (<a key={`link-${linkData.url}-${linkData.label}`} href={linkData.url}>{linkData.label}</a>);
     } else if (linkData.action) {
-        return (<a href="javascript:void(0);" onClick={(e) => handleOnClick(e, linkData)}>{linkData.label}</a>);
+        return (<a key={`link-${linkData.url}-${linkData.label}`} href="javascript:void(0);" onClick={(e) => handleOnClick(e, linkData)}>{linkData.label}</a>);
     }
 }
 

diff --git a/modules/calendar/lib/async-calendar/js/ItemFormPopup.jsx b/modules/calendar/lib/async-calendar/js/ItemFormPopup.jsx
@@ -241,7 +241,7 @@ export default function ItemFormPopup(props) {
             }
 
             fieldRows.push(
-                <tr>
+                <tr key={`field-rows-${fieldRows.length}`}>
                     <th><label htmlFor={fieldId}>{dataProperty.label}:</label></th>
                     <td>{field}</td>
                 </tr>
@@ -389,11 +389,11 @@ export default function ItemFormPopup(props) {
             linkData = formLinks[linkName];
 
             if (savingLink === linkData.id) {
-                links.push(<span>{linkData.labelLoading}</span>);
+                links.push(<span key={linkData.id}>{linkData.labelLoading}</span>);
             } else {
                 links.push(getPostLinksElement(linkData, handleLinkOnClick));
             }
-            links.push(<span>|</span>);
+            links.push(<span key={`link-separator-${links.length}`}>|</span>);
         }
 
         links.pop();

diff --git a/modules/calendar/lib/async-calendar/js/ItemPopup.jsx b/modules/calendar/lib/async-calendar/js/ItemPopup.jsx
@@ -123,7 +123,7 @@ export default function ItemPopup(props) {
             }
 
             fieldRows.push(
-                <tr>
+                <tr key={`field-rows-popup-${fieldRows.length}`}>
                     <th>{dataProperty.label}:</th>
                     <td>{field}</td>
                 </tr>
@@ -155,15 +155,15 @@ export default function ItemPopup(props) {
 
             if (linkData.url) {
                 links.push(
-                    <a href={linkData.url}>{linkData.label}</a>
+                    <a key={`links-popup-${links.length}`} href={linkData.url}>{linkData.label}</a>
                 );
             } else if (linkData.action) {
                 links.push(
-                    <a href="javascript:void(0);" onClick={(e) => handleOnClick(e, linkData)}>{linkData.label}</a>
+                    <a key={`links-popup-${links.length}`} href="javascript:void(0);" onClick={(e) => handleOnClick(e, linkData)}>{linkData.label}</a>
                 );
             }
 
-            links.push(<span>|</span>);
+            links.push(<span key={`links-popup-${links.length}`}>|</span>);
         }
 
         links.pop();

diff --git a/modules/calendar/lib/async-calendar/js/Select.jsx b/modules/calendar/lib/async-calendar/js/Select.jsx
@@ -86,7 +86,7 @@ export default function Select(props) {
 
     if (props.options) {
         options = props.options.map(option => {
-            return <option value={option.value} selected={option.value === props.value}>{option.text}</option>
+            return <option key={`select-option-${option.value}`} value={option.value} selected={option.value === props.value}>{option.text}</option>
         });
     }
 

diff --git a/modules/calendar/lib/async-calendar/js/index.min.js b/modules/calendar/lib/async-calendar/js/index.min.js