Cannot read property 'map' of undefined, difference on desktop and notebook

user_10805947 0
Viewed 51

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.

reactjs javascript
1 Answers

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(......)
user_86908570
Related