I am encountering an issue when deploying my React project to Netlify saying that my editUserInfo function within my profile-info view is not defined. Additionally, I am using React-Router to switch views in my project. This works perfectly in development and all of my links work fine until I try accessing the profile view. Other than this, the site deployed with no issues.
Here is the code for my profile view:
JavaScript
x
131
131
1
import React, { useEffect, useState } from "react";
2
import axios from "axios";
3
import UserInfo from "./user-info";
4
import { Col } from "react-bootstrap";
5
import MovieReelSpinner from "../MovieReelSpinner/MovieReelSpinner";
6
import InfoForm from "../form/info-form";
7
import FavoriteMovies from "./favorite-movies";
8
import DeleteModal from "./delete-modal";
9
import { URL } from "../../helpers/helpers";
10
import { useSelector, useDispatch } from "react-redux";
11
import { setUser, removeFromFavs } from "../../redux/features/userSlice";
12
13
import "../../styles/_profile-view.scss";
14
15
const ProfileView = ({ movies }) => {
16
const favoriteMovies = useSelector(
17
(state) => state.user.value.FavoriteMovies,
18
);
19
const userValues = useSelector((state) => state.user.value);
20
const [show, setShow] = useState("");
21
22
const token = localStorage.getItem("token");
23
const user = localStorage.getItem("user");
24
const dispatch = useDispatch();
25
26
useEffect(() => {
27
axios
28
.get(`${URL}/users/${user}`, {
29
headers: { Authorization: `Bearer ${token}` },
30
})
31
.then((res) => {
32
const {
33
Username,
34
Password,
35
Email,
36
Birthday,
37
FavoriteMovies,
38
} = res.data;
39
dispatch(
40
setUser({
41
Username,
42
Password,
43
Email,
44
Birthday: Birthday.slice(0, 10),
45
FavoriteMovies: movies.filter((movie) =>
46
FavoriteMovies.includes(movie._id),
47
),
48
}),
49
);
50
})
51
.catch((err) => console.log(err));
52
}, []);
53
54
editUserInfo = ({ username, password, email, birthday }) => {
55
axios
56
.put(
57
`${URL}/users/update/${user}`,
58
{
59
Username: username,
60
Password: password,
61
Email: email,
62
Birthday: birthday,
63
},
64
{
65
headers: { Authorization: `Bearer ${token}` },
66
},
67
)
68
.then((res) => {
69
localStorage.setItem("user", username);
70
dispatch(
71
setUser({
72
Username: username,
73
Password: password,
74
Email: email,
75
Birthday: birthday,
76
}),
77
);
78
alert(`${username} has been updated!`);
79
})
80
.catch((err) => console.log(err));
81
};
82
83
removeFromFavorites = (id) => {
84
axios
85
.delete(`${URL}/users/${user}/movies/${id}`, {
86
headers: { Authorization: `Bearer ${token}` },
87
})
88
.then((res) => dispatch(removeFromFavs(favoriteMovies.indexOf(id))))
89
.catch((err) => console.log(err));
90
};
91
92
deleteUser = () => {
93
axios
94
.delete(`${URL}/users/${user}`, {
95
headers: { Authorization: `Bearer ${token}` },
96
})
97
.then((res) => {
98
alert(`${user} has been deleted`);
99
localStorage.removeItem("user");
100
localStorage.removeItem("token");
101
window.open("/", "_self");
102
});
103
setShow("");
104
};
105
106
if (show === "update")
107
return <InfoForm editUserInfo={editUserInfo} setShow={setShow} />;
108
109
return (
110
<Col>
111
<UserInfo
112
user={userValues.Username}
113
email={userValues.Email}
114
birthday={userValues.Birthday}
115
setShow={setShow}
116
/>
117
<DeleteModal show={show} setShow={setShow} deleteUser={deleteUser} />
118
{favoriteMovies ? (
119
<FavoriteMovies
120
favoriteMovies={favoriteMovies}
121
removeFromFavorites={removeFromFavorites}
122
/>
123
) : (
124
<MovieReelSpinner />
125
)}
126
</Col>
127
);
128
};
129
130
export default ProfileView;
131
Reference Error:
JavaScript
1
12
12
1
ReferenceError: editUserInfo is not defined
2
at Ay (profile-view.jsx:39)
3
at bi (react-dom.production.min.js:157)
4
at is (react-dom.production.min.js:267)
5
at Bs (react-dom.production.min.js:250)
6
at $s (react-dom.production.min.js:250)
7
at Us (react-dom.production.min.js:250)
8
at Fs (react-dom.production.min.js:243)
9
at react-dom.production.min.js:123
10
at b (scheduler.production.min.js:18)
11
at aa (react-dom.production.min.js:122)
12
Any help would be much appreciated!
Advertisement
Answer
Some optimization process Netlify has might drop editUserInfo =
as it would be assigned to a global since it’s missing var
/let
/const
.
Try changing it to const editUserInfo = ...
instead to see if that helps.