CodeWithHarry / iNotebook-React

INotebook is a React Application for managing personal notes on the cloud
343 stars 193 forks source link

notes.map is not a function #49

Open Jawad-Ali2 opened 1 year ago

Jawad-Ali2 commented 1 year ago

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

VisheshG8 commented 1 year ago

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

Imran4265 commented 1 year ago

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

Jawad-Ali2 commented 1 year ago

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

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

PrakharDsek commented 1 year ago

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

{i.title}

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

On Mon, Apr 17, 2023 at 2:13 PM Jawad-Ali2 @.***> wrote:

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). Kindly, someone help me with this issue, I've been facing for 1 week now. Thanks.

[image: image] https://user-images.githubusercontent.com/107391644/232431714-540c0546-5ce0-4cde-94c7-5d80f4f6bdff.png

— Reply to this email directly, view it on GitHub https://github.com/CodeWithHarry/iNotebook-React/issues/49, or unsubscribe https://github.com/notifications/unsubscribe-auth/AZIEUL6ZASSTWATSUCCBOLLXBT7DPANCNFSM6AAAAAAXA3OOJU . You are receiving this because you are subscribed to this thread.Message ID: @.***>

PrakharDsek commented 1 year ago

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

{i.title}

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

PrakharDsek commented 1 year ago

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"}

Imran4265 commented 1 year ago

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

tarun8367 commented 1 year ago

Have anyone resolved it please share

AbhinavBachchan commented 11 months ago

{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.

ramshahu commented 11 months ago

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

siddhantv7 commented 5 months ago

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 ( <>

  <div className="row my-3">
    {!localStorage.getItem("token") ? navigator('/login')
     :  Array.isArray(notes) && notes?.map((note) => {
      // return <div key={note.id}>{note.title}</div>;
      return <Noteitem key={note._id} note={note} />
    })
    }
  </div>
</>

); };

export default Notes;