CodeWithHarry / iNotebook-React

INotebook is a React Application for managing personal notes on the cloud

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

notes.map is not a function

Jawad-Ali2 opened this issue · comments

The code works fine till video#71. But changes in noteState.js
headers: {
'Content-Type': 'application/json',
"auth-token": localStorage.getItem('token')
}
caused this issue. If I remove the localStorage line and write the previous line (the auth token we used on the endpoint) the app works fine.
Kindly, someone help me with this issue, I've been facing for 1 week now. Thanks.

image

Hi , I am also facing this issue did you find any solution please help

Hi , I am also facing this issue did you find any solution please help

One way I found is:
Array.from(notes).map((note) => {}

But after this I am unable to fetch notes on my main page.

hey you guys can use this code - {Notes ? Notes.map((i) => ( <>

{i.title}

</>)) :"No notes available"}

Hi , I am also facing this issue did you find any solution please help

hey you guys can use this code - {Notes ? Notes.map((i) => ( <>

{i.title}

</>)) :"No notes available"}

I tried using them and the problem was solved but my addnote through frontend getnotes are returning 401 bad request any help to get through this

Have anyone resolved it please share

{notes.length>0? notes.map((note)=>{
return ;
}):


No Notes to Display
}
You can use this it just checks whether the notes array length is 0 or greater if its zero is prints no notes to display else it renders all the notes.

The code works fine till video#71. But changes in noteState.js headers: { 'Content-Type': 'application/json', "auth-token": localStorage.getItem('token') } caused this issue. If I remove the localStorage line and write the previous line (the auth token we used on the endpoint) the app works fine. Kindly, someone help me with this issue, I've been facing for 1 week now. Thanks.

image

check your auth.js file and fetchuser.js file in backend. you might have written auth-token. simple write auth-token instead of token in localStorage.getItem('auth-token') in NoteState.js,login.js,signup.js.,Notes.js and Navbar.js. Also replace the json.authtoken with authToken in Login.js and Signup.js. hope this will help you

Here is solution

import React, { useContext, useEffect } from 'react';
import noteContext from '../context/notes/noteContext';
import Noteitem from './Noteitem';
import AddNote from './AddNote';
import { useNavigate } from 'react-router-dom';

const Notes = () => {
const navigator = useNavigate();
const context = useContext(noteContext);
const { notes, getNote } = context;

console.log("notes");
console.log(typeof(notes));

useEffect(() => {
getNote();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // Make sure to pass an empty dependency array to run this effect only once

return (
<>


{!localStorage.getItem("token") ? navigator('/login')
: Array.isArray(notes) && notes?.map((note) => {
// return
{note.title}
;
return
})
}

</>
);
};

export default Notes;