TypeError: Cannot read property 'map' of undefined in react.js

Question

Hi guys i am new to react js and It keeps on saying TypeError: Cannot read property 'map' of undefined in react.js, even tho its not undefined.

//my variables    
    const [musics, setMusics] = useState()
    const [user, setUser] = useState(null)
    const [pfp, setPfp] = useState(null)
    const { params: { uID } } = match;
    var userName;
    var musicArray = [];
//use effect so it does not infinite loop     
 useEffect(()=>{   firebase.database().ref("users/"+uID+"/public/songs/").on("value", (snapshot)=>{
            var music = snapshot.val()
            //gets title of each songs
            Object.values(music).forEach((value)=>{  
                musicArray.push(value.title)//pushes value to array
                setMusics(musicArray)//sets that array to musics
                
            })
        })    
    }, [])
    
    return(
           .....
          <div class = "music-content-container">
                    <div class = "music-box">
                        <div class = "user-musics">
                            <ul>
                            //says TypeError: Cannot read property 'map' of undefined even tho its defined
                                {musics.map((name)=>{   
                                    return <li>{name}</li>
                                })}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
         .....
            )

how do I fix this issue? is there any way to fix this?

Does this answer your question? How to create new element and render data each time the data is fetched in react — claud.io
– claud.io, Commented Dec 6, 2020 at 15:49
duplicated of stackoverflow.com/questions/65167643/… with already the correct answer — claud.io
– claud.io, Commented Dec 6, 2020 at 15:51

michael · Accepted Answer · 2020-12-06 15:47:10Z

9

The initial value of musics state is undefined. You should give initial value like this.

const [musics, setMusics] = useState([])

answered Dec 6, 2020 at 15:47

michael

4,1733 gold badges15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DjBillje Official Over a year ago

thank you it works now, but idk why it only renders the first index of the array

michael Over a year ago

It seems like there's wrong logic on your code for getting values from firebase

DjBillje Official Over a year ago

can you teach me how to do it? or suggest me some videos

Mantas Astra · Accepted Answer · 2020-12-06 15:54:32Z

3

It's because when you define the state using useState for musics, you don't specify an initial value. Therefore, ReactJS doesn't know what type musics is.

The good practice is to always provide an initial state when using useState. In your case, it would be simply providing an empty array.

const [musics, setMusics] = useState([])

I would even go further and rename the musics to something like tracks as this is more readable.

As a further refactoring in your code, I'd avoid using var and instead define variables with either const if it's not going to be changed or let if you expect to re-assign it.

I also noticed that in your useEffect you don't provide values for the dependency array for musicArray and uID as these are declared outside of useEffect. To avoid unnecessary re-renders, always provide external values in the dependency array. This way, the useEffect will be triggered when the values in the dependency array change.

useEffect(() => {
   ...
  }, [musicArray, uID]);

Also, when using React, instead of class in your JSX use className as that's what React uses to map it to HTML class attribute. It's just one of React things that you need to remember.

So in your JSX you would write something like this

<div className="music-content-container">
...
</div>

answered Dec 6, 2020 at 15:54

Mantas Astra

1,0827 silver badges16 bronze badges

4 Comments

DjBillje Official Over a year ago

Thank you so much, it will really help me out as i am beginner :)

DjBillje Official Over a year ago

the useEffect tip you gave me solved the problem that i was trying to solve for 30min

DjBillje Official Over a year ago

when i do useEffect(() => { ... }, [musicArray, uID]); it creates an infinite loop errr Maximum update depth exceeded

Mantas Astra Over a year ago

I'd extract the firebase data fetch into its own function and call it inside useEffect while also adding the function to the dependency array.

Keith Rousseau · Accepted Answer · 2020-12-06 15:50:01Z

1

It is null when the component first renders until the useEffect sets the data. I would initialize it to an empty array in useState.

answered Dec 6, 2020 at 15:50

Keith Rousseau

4,4931 gold badge24 silver badges28 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'map' of undefined in react.js

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related