All components - update correctly on both prop create and update

src/Components/ClosedReason/Component.tsx

@@ -9,9 +9,16 @@ export class ClosedReason extends React.Component<ObjectWithHoliday, {}> {
 
     constructor(props: ObjectWithHoliday) {
         super(props);
-        this.holiday = props.holiday;
+        this.updateFromProps(props);
     }
 
+    componentWillUpdate(nextProps: ObjectWithHoliday, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+
+    updateFromProps(props: ObjectWithHoliday) {
+        this.holiday = props.holiday;
+    }
     render() {
         return (
             <div className="ClosedReason">

src/Components/NextOpenCloseMini/Component.tsx

@@ -19,6 +19,14 @@ export class NextOpenCloseMini extends React.Component<NextOpenCloseMiniProps, {
 
     constructor(props: NextOpenCloseMiniProps) {
         super(props);
+        this.updateFromProps(props);
+    }
+
+    componentWillUpdate(nextProps: NextOpenCloseMiniProps, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+
+    updateFromProps(props: NextOpenCloseMiniProps) {
         this.xDay = props.xDay;
         this.openOrClose = props.openOrClose;
         this.allHolidays = props.allHolidays;

src/Components/OpenXDay/Component.tsx

@@ -21,6 +21,14 @@ export class OpenXDay extends React.Component<OpenXDayProps, {}> {
 
     constructor(props: OpenXDayProps) {
         super(props);
+        this.updateFromProps(props);
+    }
+
+    componentWillUpdate(nextProps: OpenXDayProps, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+
+    updateFromProps(props: OpenXDayProps) {
         this.question = props.question;
         this.xDay = props.xDay;
         this.allHolidays = props.allHolidays;

src/Components/OpenXDayMini/Component.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as moment from 'moment-timezone';
 import * as classnames from 'classnames';
+import { Link } from 'react-router-dom';
 import "./Component.css";
 import { HolidayList } from '../../Data';
 import { Utils, HolidayAnswer } from "../../Utils";
@@ -20,11 +21,19 @@ export class OpenXDayMini extends React.Component<OpenXDayMiniProps, {}> {
 
     constructor(props: OpenXDayMiniProps) {
         super(props);
+        this.updateFromProps(props);
+    }
+    
+    componentWillUpdate(nextProps: OpenXDayMiniProps, nextState: {}) {
+        this.updateFromProps(nextProps);
+    }
+    
+    updateFromProps(props: OpenXDayMiniProps) {
         this.xDay = props.xDay;
         this.dateDescription = props.dateDescription;
         this.allHolidays = props.allHolidays;
-
-        this.answer = Utils.getHolidayAnswerOnDate(this.xDay, this.allHolidays);
+    
+        this.answer = Utils.getHolidayAnswerOnDate(this.xDay, this.allHolidays);    
     }
 
     render() {
@@ -32,14 +41,16 @@ export class OpenXDayMini extends React.Component<OpenXDayMiniProps, {}> {
 
         return (
             <div className={"OpenXDayMini"} >
-                <div className="OpenXDayMini-inner">
-                    <div className={classnames([textColorClass, "openOrCloseText"])}>
-                        {this.answer.open ? "Open" : "Closed"}
+                <Link to={`./${this.xDay.format("YYYY-MM-DD")}`}>
+                    <div className="OpenXDayMini-inner">
+                        <div className={classnames([textColorClass, "openOrCloseText"])}>
+                            {this.answer.open ? "Open" : "Closed"}
+                        </div>
+                        <div className="dateDescription">
+                            {this.dateDescription}
+                        </div>
                     </div>
-                    <div className="dateDescription">
-                        {this.dateDescription}
-                    </div>
-                </div>
+                </Link>
             </div>
         );
     }