Merge branch 'feat/3176-grid-edit-modal-for-master-merge' into imprv/reverse-order-of-break-point-radio

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -87,7 +87,7 @@ class GridEditModal extends React.Component {
     const { t } = this.props;
     const output = Object.entries(resSizeObj).map((responsiveSizeForMap) => {
       return (
-        <div className="custom-control custom-radio custom-control-inline">
+        <div key={responsiveSizeForMap[0]} className="custom-control custom-radio custom-control-inline">
           <input
             type="radio"
             className="custom-control-input"
@@ -112,17 +112,20 @@ class GridEditModal extends React.Component {
     return (
       <div className="container">
         <div className="row">
-          {gridDivisions.map((gridDivion, i) => {
+          {gridDivisions.map((gridDivision) => {
+            const numOfDivisions = gridDivision.numberOfGridDivisions;
             return (
-              <div className="col-md-4 text-center">
-                <h6 className="dropdown-header">{gridDivion.numberOfGridDivisions} {t('grid_edit.division')}</h6>
-                {gridDivion.mapping.map((gridOneDivision) => {
+              <div key={`${numOfDivisions}-divisions`} className="col-md-4 text-center">
+                <h6 className="dropdown-header">{numOfDivisions} {t('grid_edit.division')}</h6>
+                {gridDivision.mapping.map((gridOneDivision) => {
+                  const keyOfRow = `${numOfDivisions}-divisions-${gridOneDivision.join('-')}`;
                   return (
-                    <button className="dropdown-item" type="button" onClick={() => { this.checkColsRatios(gridOneDivision) }}>
+                    <button key={keyOfRow} className="dropdown-item" type="button" onClick={() => { this.checkColsRatios(gridOneDivision) }}>
                       <div className="row">
-                        {gridOneDivision.map((god) => {
+                        {gridOneDivision.map((god, i) => {
+                          const keyOfCol = `${keyOfRow}-${i}`;
                           const className = `bg-info col-${god} border`;
-                          return <span className={className}>{god}</span>;
+                          return <span key={keyOfCol} className={className}>{god}</span>;
                         })}
                       </div>
                     </button>
@@ -252,10 +255,11 @@ class GridEditModal extends React.Component {
 
   renderNoBreakPreview() {
     const { colsRatios } = this.state;
-    const convertedHTML = colsRatios.map((colsRatios) => {
-      const className = `col-${colsRatios} border`;
+    const convertedHTML = colsRatios.map((colsRatio, i) => {
+      const key = `grid-preview-col-${i}`;
+      const className = `col-${colsRatio} border`;
       return (
-        <div className={className}></div>
+        <div key={key} className={className}></div>
       );
     });
     return (
@@ -265,10 +269,11 @@ class GridEditModal extends React.Component {
 
   renderBreakPreview() {
     const { colsRatios } = this.state;
-    const convertedHTML = colsRatios.map(() => {
+    const convertedHTML = colsRatios.map((colsRatio, i) => {
+      const key = `grid-preview-col-${i}`;
       const className = 'col-12 border';
       return (
-        <div className={className}></div>
+        <div key={key} className={className}></div>
       );
     });
     return (