I have this odd issue. I'm trying to code my Portfolio in ReactJS and I have a desktop and notebook. I'm uploading my code to my GitHub repository.
On my desktop, the code runs super fine and I don't get any error message, now if I clone my repository in my notebook, in the console doesn't appear any error but in the browser localhost:3000, I keep receiving this error "Cannot read property 'map' of undefined" from any part of code that I am mapping.
import React, { useContext } from "react";
import { Container, Columns, Title } from "./ProjectPortfolioElements";
import Card from "../Projects/Card";
import desktopMockup from "../../assets/projects/modern-browser-mockup.png";
import dictionary from "../Dictionary/dictionary";
import { LanguageContext } from "../../App";
function ProjectPortfolio() {
const [language] = useContext(LanguageContext);
return (
<>
{dictionary[language].map(({ project }) => (
<>
<Title>
<h1>{project}</h1>
</Title>
<Container>
<Columns>
<Card
image={desktopMockup}
title="Logistic Website"
description="This website was fully done with ReactJS"
/>
</Columns>
<Columns>
<Card
image={desktopMockup}
title="Logistic Website"
description="This website was fully done with ReactJS"
/>
</Columns>
</Container>{" "}
</>
))}
</>
);
}
export default ProjectPortfolio;
I really don't have an idea what can be. The console is fine, my desktop is fine and my notebook doesn't run.
defaultLanguage is "br" if there is nothing stored in local storage. I suspect you are hitting this default value on the laptop since you've stated just cloning the project and it's likely not run to be able to set a language into localStorage.
const defaultLanguage = "br"; // <-- default
export const LanguageContext = React.createContext();
function App() {
const [language, setLanguage] = useState(() => {
const langFromLocalStorage = window.localStorage.getItem("lang");
return langFromLocalStorage
? langFromLocalStorage
: defaultLanguage; // <-- default if nothing in localStorage
});
React.useEffect(() => {
window.localStorage.setItem("lang", language);
}, [language]);
return (
<div className="App">
<LanguageContext.Provider value={[language, setLanguage]}>
<Main></Main>
</LanguageContext.Provider>
</div>
);
}
I suggest changing defaultLanguage to one of "en", "ptbr", "jp", or "ru".
And/or as an extra guard, use Optional Chaining operator on the dictionary[language] value in case some other language is somehow stored in localStorage that isn't a key into the dictionary.
dictionary?.[language]?.map(......)