diff --git a/web/src/CropperDiv.js b/web/src/CropperDiv.js
index 3cee2be1..88b62e9e 100644
--- a/web/src/CropperDiv.js
+++ b/web/src/CropperDiv.js
@@ -103,7 +103,7 @@ export const CropperDiv = (props) => {
         onCancel={handleCancel}
         width={600}
         footer={
-          [<Button block type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
+          [<Button block key="submit" type="primary" onClick={handleOk}>{i18next.t("user:Set new profile picture")}</Button>]
         }
       >
         <Col style={{margin: "0px auto 40px auto", width: 1000, height: 300}}>
diff --git a/web/src/PaymentResultPage.js b/web/src/PaymentResultPage.js
index 380a5260..25cefe4e 100644
--- a/web/src/PaymentResultPage.js
+++ b/web/src/PaymentResultPage.js
@@ -83,7 +83,7 @@ class PaymentResultPage extends React.Component {
             title={`${i18next.t("payment:The payment is still under processing")}: ${payment.productDisplayName}, ${i18next.t("payment:the current state is")}: ${payment.state}, ${i18next.t("payment:please wait for a few seconds...")}`}
             subTitle={i18next.t("payment:Please click the below button to return to the original website")}
             extra={[
-              <Spin size="large" tip={i18next.t("payment:Processing...")} />,
+              <Spin key="returnUrl" size="large" tip={i18next.t("payment:Processing...")} />,
             ]}
           />
         </div>
diff --git a/web/src/auth/LoginPage.js b/web/src/auth/LoginPage.js
index 05d12120..372c482d 100644
--- a/web/src/auth/LoginPage.js
+++ b/web/src/auth/LoginPage.js
@@ -285,7 +285,7 @@ class LoginPage extends React.Component {
           title="Sign Up Error"
           subTitle={"The application does not allow to sign up new account"}
           extra={[
-            <Link onClick={() => {
+            <Link key="login" onClick={() => {
               Setting.goToLogin(this, application);
             }}>
               <Button type="primary" key="signin">
diff --git a/web/src/auth/OidcDiscoveryPage.js b/web/src/auth/OidcDiscoveryPage.js
index 8b56fe52..7680179f 100644
--- a/web/src/auth/OidcDiscoveryPage.js
+++ b/web/src/auth/OidcDiscoveryPage.js
@@ -16,7 +16,7 @@ import React from "react";
 import * as Setting from "../Setting";
 
 class OdicDiscoveryPage extends React.Component {
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     if (Setting.isLocalhost()) {
       Setting.goToLink(`${Setting.ServerUrl}/.well-known/openid-configuration`);
     }
diff --git a/web/src/basic/HomePage.js b/web/src/basic/HomePage.js
index f1a0bd5c..0376d192 100644
--- a/web/src/basic/HomePage.js
+++ b/web/src/basic/HomePage.js
@@ -84,7 +84,7 @@ class HomePage extends React.Component {
           {
             items.map(item => {
               return (
-                <SingleCard logo={item.logo} link={item.link} title={item.name} desc={item.organizer} isSingle={items.length === 1} />
+                <SingleCard key={item.link} logo={item.logo} link={item.link} title={item.name} desc={item.organizer} isSingle={items.length === 1} />
               );
             })
           }
diff --git a/web/src/common/AffiliationSelect.js b/web/src/common/AffiliationSelect.js
index 5d20916c..f723d2c9 100644
--- a/web/src/common/AffiliationSelect.js
+++ b/web/src/common/AffiliationSelect.js
@@ -30,7 +30,7 @@ class AffiliationSelect extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getAddressOptions(this.props.application);
     this.getAffiliationOptions(this.props.application, this.props.user);
   }
diff --git a/web/src/common/OAuthWidget.js b/web/src/common/OAuthWidget.js
index 69264bcd..8b7f8900 100644
--- a/web/src/common/OAuthWidget.js
+++ b/web/src/common/OAuthWidget.js
@@ -30,7 +30,7 @@ class OAuthWidget extends React.Component {
     };
   }
 
-  componentWillMount() {
+  UNSAFE_componentWillMount() {
     this.getAddressOptions(this.props.application);
     this.getAffiliationOptions(this.props.application, this.props.user);
   }