From b8322417a0031732ff19531c5282fdca072ed196 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= <andre.wahlberg@outlook.com>
Date: Fri, 27 Nov 2020 13:36:48 +0100
Subject: [PATCH] Fix some React errors and warnings

---
 src/components/Header.js       |  2 +-
 src/components/MenuButton.js   |  4 ++--
 src/components/TrafficEntry.js | 24 +++++++++++-------------
 src/components/TrafficList.js  |  8 +++++---
 src/components/TripSelector.js |  2 +-
 5 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/components/Header.js b/src/components/Header.js
index d27a838..1a1197a 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,7 +6,7 @@ class Header extends Component {
     render() {
         return (
             <header>
-                <button id="navBtn"><img src={navIcon} /></button>
+                <button id="navBtn"><img src={navIcon} alt="" /></button>
                 <h1 id="pageTitle">{this.props.title}</h1>
             </header>
         );
diff --git a/src/components/MenuButton.js b/src/components/MenuButton.js
index 6bda14c..0c78162 100644
--- a/src/components/MenuButton.js
+++ b/src/components/MenuButton.js
@@ -6,13 +6,13 @@ class MenuButton extends Component {
             return (
                 <button>
                     <span>{this.props.label}</span>
-                    <img src={this.props.icon}/>
+                    <img src={this.props.icon} alt="" />
                 </button>
             );
         } else {
             return (
                 <button>
-                    <img src={this.props.icon}/>
+                    <img src={this.props.icon} alt="" />
                     <span>{this.props.label}</span>
                 </button>
             );
diff --git a/src/components/TrafficEntry.js b/src/components/TrafficEntry.js
index 63829ea..0e97297 100644
--- a/src/components/TrafficEntry.js
+++ b/src/components/TrafficEntry.js
@@ -8,28 +8,26 @@ import warningIcon from '../img/warning.svg';
 class TrafficEntry extends Component {
     render() {
         let trafficInfo = this.props.departure.info;
-        let lineInterference = trafficInfo != "" && trafficInfo != null;
-        let infoElem = <></>;
-
-        if (trafficInfo != "" && trafficInfo != null)
-            infoElem = <p>{trafficInfo} <u>Visa mer</u></p>
+        let lineInterference = trafficInfo !== "" && trafficInfo !== null;
 
         return (
-            <div class="trafficEntry">
+            <div className="trafficEntry">
                 <div>
-                    <div class="timeColumn">
+                    <div className="timeColumn">
                         <span>{this.props.departure.time}</span>
                         {lineInterference &&
-                                <img src={warningIcon}></img>
+                                <img src={warningIcon} alt=""></img>
                         }
                     </div>
-                    <div class="lineColumn">
+                    <div className="lineColumn">
                         <div>
-                            <span class="lineName">{this.props.departure.lineName}</span>
-                            <img src={busIcon}></img>
-                            <span class="destination">{this.props.departure.destination}</span>
+                            <span className="lineName">{this.props.departure.lineName}</span>
+                            <img src={busIcon} alt=""></img>
+                            <span className="destination">{this.props.departure.destination}</span>
                         </div>
-                        {infoElem}
+                        {lineInterference &&
+                            <p>{trafficInfo} <u>Visa mer</u></p>
+                        }
                     </div>
                 </div>
 
diff --git a/src/components/TrafficList.js b/src/components/TrafficList.js
index d96e079..c91101c 100644
--- a/src/components/TrafficList.js
+++ b/src/components/TrafficList.js
@@ -8,18 +8,20 @@ class TrafficList extends Component {
     render() {
         let entries = [];
 
+        let i = 0; // React requires elems in array to have associated unique key
+
         this.props.departures.forEach(departure => {
             entries.push(
-                <TrafficEntry departure={departure} />
+                <TrafficEntry key={i++} departure={departure} />
             );
         });
 
         // Add separator between every element
         const intersperse = (arr, sep) => arr.reduce((a,v)=>[...a,v,sep],[]).slice(0,-1);
-        entries = intersperse(entries, (<hr />));
+        entries = intersperse(entries, (<hr key={i++} />));
 
         // Add separator after the last element
-        entries.push(<hr />);
+        entries.push(<hr key={i++} />);
 
         return (
             <div id="trafficList">
diff --git a/src/components/TripSelector.js b/src/components/TripSelector.js
index 838f1b5..d1394c8 100644
--- a/src/components/TripSelector.js
+++ b/src/components/TripSelector.js
@@ -7,7 +7,7 @@ class TripSelector extends Component {
                 <label>Från:</label>
                 <input type="text" placeholder="Hållplats/Adress/Plats" />
                 <hr/>
-                <label for="lname">Till:</label>
+                <label>Till:</label>
                 <input type="text" placeholder="Hållplats/Adress/Plats" />
             </form>
         );