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.
CodePudding user response:
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.
CodePudding user response:
I think it deployed fine, but there is an error in your ContactsList component. Look it the console. TypeError: e.contacts is null