Search code examples
javascriptreactjsgithub-pages

React project displaying blank page on GitHub Pages

I have a project that is displaying a blank page on GitHub Pages. I have added

"homepage": "https://jusmccar.github.io/ContactManager",

"predeploy": "npm run build",
"deploy": "gh-pages -d build",

to my package.json and ran the commands

npm install gh-pages --save-dev
npm run deploy

Here is the link to my repo: ContactManager

I have another project FitClub that it works just fine on so I don't know what I'm doing wrong.

Solution

  • Your problem is here in App.js

    const [contacts, setContacts] = useState(
  JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
);

    You're not doing anything to handle the initial case where there is nothing in local storage.

    This causes null to be passed to the contacts prop in ContactList. The code there attempts to use props.contacts.map() which leads to this error you see in your browser console...

    Cannot read properties of null (reading 'map')
    at x (ContactList.js:9:46)

    I would suggest defaulting to an empty array when getItem() returns null

    const [contacts, setContacts] = useState(
  JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) ?? []
);

    A further suggestion would be to use TypeScript which would warn you about the potential for localStorage to return null values.