Fix React warnings in development

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop.jsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import axios from "axios";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import PropTypes from "prop-types";
 import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
 import { v4 as uuidv4 } from 'uuid';
@@ -314,10 +314,10 @@ class Layout extends React.PureComponent {
         ) : null}
 
 
-        <div class={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
-          <div class="modal-dialog" role="document">
-            <div class="modal-content">
-              <div class="modal-body rfqFeedback">
+        <div className={`modal fade ${ showRFQFeedback ? 'show': ''}`} style={{'display': showRFQFeedback ? 'block':'none'}} id="exampleModal" tabIndex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+          <div className="modal-dialog" role="document">
+            <div className="modal-content">
+              <div className="modal-body rfqFeedback">
 
                 <div className="d-flex w-100">
 
@@ -369,8 +369,8 @@ class Layout extends React.PureComponent {
                       </form>
 
                       <div className="d-flex flex-column flex-sm-row justify-content-end">
-                        <a type="button" onClick={onClickCloseRFQFeedback} class="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a>
-                        <a type="button" onClick={this.handleClickLoad} class={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
+                        <a type="button" onClick={onClickCloseRFQFeedback} className="btn btn-sm btn-outline-primary m-0 mb-2 mb-sm-0 me-sm-2">Close</a>
+                        <a type="button" onClick={this.handleClickLoad} className={`btn btn-sm btn-primary m-0 ms-sm-2 ${this.state.error ? 'disabled':''}`}>Load configuration</a>
                       </div>
                     </div>
                   ) : null}
@@ -453,7 +453,7 @@ class ProductItem extends React.PureComponent {
 
     const render_datasheet_link = (datasheet_file && datasheet_name && (
       <div className="ds">
-        <span class='doc-icon'></span>
+        <span className='doc-icon'></span>
         <a href={datasheet_file} target="_blank" rel="noopener noreferrer">
           {datasheet_name}
         </a>
@@ -464,7 +464,7 @@ class ProductItem extends React.PureComponent {
       <section className="productItem">
 
         <div className="content">
-          <h3 style={{ 'margin-bottom': name_codename ? '5px' : '20px'}}>{name}</h3>
+          <h3 style={{ 'marginBottom': name_codename ? '5px' : '20px'}}>{name}</h3>
           {name_codename ? (
             <p>{name_codename}</p>
           ) : null }
@@ -1025,11 +1025,10 @@ class OrderPanel extends React.PureComponent {
         </div>
 
         <div>
-          <input
+          <button
               className="btn btn-sm btn-outline-primary m-0 mb-2"
               style={{'cursor': 'pointer'}}
-              value="Import JSON"
-              onClick={onClickOpenImport} />
+              onClick={onClickOpenImport}>Import JSON</button>
         </div>
 
         {isMobile ? (
@@ -1255,13 +1254,12 @@ class OrderForm extends React.PureComponent {
               placeholder="Additional notes" />
 
           <div className="d-flex flex-column flex-sm-row justify-content-between">
-            <input
+            <button
               className="btn btn-outline-primary w-100 m-0 mb-2 mb-sm-0 me-sm-2"
               style={{'cursor': 'pointer', 'fontWeight': '700'}}
-              value="Show JSON"
-              onClick={onClickShow} />
+              onClick={onClickShow}>Show JSON</button>
 
-            <input className="btn btn-primary w-100 m-0  ms-sm-2" type="submit" value={`${isProcessing ? 'Processing ...' : 'Request quote'}`} />
+            <button className="btn btn-primary w-100 m-0  ms-sm-2" type="submit">{`${isProcessing ? 'Processing ...' : 'Request quote'}`}</button>
           </div>
           {/*This will open an email window. Send the email to make your request.*/}
         </form>
@@ -1514,7 +1512,7 @@ class Backlog extends React.PureComponent {
     }));
    const groups = ordered_groups.map((group, g_index) => {
           return (
-              <div className="accordion-item">
+              <div className="accordion-item" key={`${group.name}`}>
                 <h2 className="accordion-header">
                   <button className="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                           data-bs-target={`#collapse${g_index}`} aria-expanded="true" aria-controls={`collapse${g_index}`}>
@@ -2026,7 +2024,7 @@ class Shop extends React.PureComponent {
     } = this.state;
 
     const itemsCloned = Array.from(newItems);
-    const itemsData = {};
+    const itemsData = [];
     const rules = {};
 
 
@@ -2310,9 +2308,7 @@ class Shop extends React.PureComponent {
         ...this.state.columns,
         cart: {
           ...this.state.columns.cart,
-          itemsData: {
-            ...itemsData,
-          },
+          itemsData: itemsData,
         }
       },
       rules: {
@@ -2431,8 +2427,4 @@ class Shop extends React.PureComponent {
   }
 }
 
-
-ReactDOM.render(
-  <Shop data={data} />,
-  document.querySelector('#root-shop'),
-);
+createRoot(document.querySelector('#root-shop')).render(<Shop data={data} />);

static/js/shop_data.js

@@ -921,7 +921,7 @@ const shop_data = {
       id: 'cart',
       title: 'Cart',
       items: [],
-      itemsData: {},
+      itemsData: [],
     },
 
   },