Deployed React app not working same as local version - reactjs

Question

I have a redux action which sends a request to update some data in the backend and on the response I dispatch another action to set this updated data. Heres the action:
export const openLecture = lectureId => dispatch => {
axios
.put(`/api/lectures/open/${lectureId}`)
.then(res => {
if (res.data.lecture) {
console.log(res.data.lecture);
dispatch(getLecture(res.data.lecture._id));
}
})
.catch(err => {
console.log(err);
});
};
Theres a component which takes this data from the redux state adn passes it to a child component. Heres the child component:
class LectureHeader extends Component {
constructor() {
super();
this.state = {};
this.makeLectureLive = this.makeLectureLive.bind(this);
this.closeLecture = this.closeLecture.bind(this);
}
componentWillReceiveProps(newProps) {
this.setState({ ...newProps });
}
makeLectureLive() {
this.props.openLecture(this.props.id);
}
closeLecture() {
this.props.closeLecture(this.props.id);
}
render() {
const { form, status, notes, id, date, code, name } = this.state;
let formBtn, liveBtn, liveStatus, progress, liveColor;
let formLink = `/dashboard/form/${id}`;
if (typeof form !== "undefined") {
if (form.length > 0) {
formBtn = (
<a id="formBtn" href={formLink} className="btn btn-dark">
Edit form
</a>
);
} else {
formBtn = (
<a id="formBtn" href={formLink} className="btn btn-dark">
Create form
</a>
);
}
//Lecture has not been live yet
if (status.iat === null && status.exp === null) {
liveBtn = (
<a
id="liveBtn"
href="javascript:void(0)"
className="btn btn-primary"
data-toggle="modal"
data-target=".bd-example-modal-sm"
>
Make Live
</a>
);
} else if (status.iat <= Date.now() && status.exp >= Date.now()) {
//Lecture is currently live
liveBtn = (
<a
id="liveBtn"
onClick={this.closeLecture}
href="javascript:void(0)"
className="btn btn-primary"
>
Close Lecture
</a>
);
formBtn = (
<a id="formBtn" href={formLink} className="btn btn-dark">
see form
</a>
);
liveColor = "#05c435";
let percent =
(100 * (Date.now() - status.iat)) / (status.exp - status.iat);
let percentWidth = percent + "%";
progress = (
<div style={{ height: "8px" }} className="progress">
<div
className="progress-bar"
role="progressbar"
style={{ width: percentWidth }}
aria-valuenow={percent}
aria-valuemin="0"
aria-valuemax="100"
/>
</div>
);
} else {
//Lecture was live and now is closed
formBtn = (
<a id="formBtn" href={formLink} className="btn btn-dark">
see form
</a>
);
}
}
let confirmModal = (
<div
className="modal fade bd-example-modal-sm"
tabIndex="-1"
role="dialog"
aria-labelledby="mySmallModalLabel"
aria-hidden="true"
>
<div className="modal-dialog modal-sm">
<div style={{ padding: "20px" }} className="modal-content">
<p>Are you sure you want to make this lecture live?</p>
<a
id="liveBtn"
href="javascript:void(0)"
className="btn btn-primary"
data-dismiss="modal"
aria-label="Close"
onClick={this.makeLectureLive}
>
Yes
</a>
<a
id="confirmCancel"
href={formLink}
className="btn btn-dark"
data-dismiss="modal"
aria-label="Close"
>
Cancel
</a>
</div>
</div>
</div>
);
return (
<div className="lecture-header">
<div>
<h1 style={{ color: liveColor }}>{name}</h1>
{formBtn}
{liveBtn}
{confirmModal}
<hr />
<h6 id="lecture-code">code: {code}</h6>
<small className="text text-muted">{date}</small>
<h6>{notes}</h6>
</div>
{progress}
</div>
);
}
}
LectureHeader.propTypes = {
openLecture: PropTypes.func.isRequired,
closeLecture: PropTypes.func.isRequired,
name: PropTypes.string,
notes: PropTypes.string,
form: PropTypes.array,
status: PropTypes.object,
id: PropTypes.string
};
export default connect(
null,
{ openLecture, closeLecture }
)(LectureHeader);
The problem Im having is that this component si fully updating when I run the app locally. However I have it deployed in two places and neither of them fully update the component. The component changes slightly but doesnt actually update based on any of the new data. I cant figure out why any suggestions would be great. Thanks in advance.