uploading files to firebase-firestore with react

Question

So I set up Firebase with my react app and trying currently to resolve a problem with it's firestore cloud database. What I want to do is to allow users to upload songs from their device by an input form, and these songs are then stored in the cloud Firestore database and then after that these files get rendered in a list, this is the code.

import React, {useState, useEffect} from 'react';
import LoggedNav from './navLogged';
import db from '../firebase'

const SongListUI = () => {

    const [songs, setSongs] = useState([])
    const [oneSong, setSong] = useState('')
    const [Artist, setArtist] = useState('')
    const [src, setSrc] = useState('')


    const handleSubmit = (e) =>{
        e.preventDefault()

        let songbase = db.collection('Songs')
        let data = {oneSong, Artist, src}

        songbase
            .add(data);

        songbase.onSnapshot(snapshot =>{
            snapshot.docChanges().forEach(change =>{ 
                setSongs({title: change.doc.data().oneSong, aritst:change.doc.data().Artist, source: change.doc.data().src})
            })
        })
    }



    return ( 
        <div className="hi">

            <div>
                <LoggedNav />
            </div>
            <div>
                {
                    songs.map(song =>{
                        return(
                            <div key={song.id}>
                                <h4>{song.title}</h4>
                                <audio controls>
                                    <source src={song.source} type="audio/mpeg" />
                                </audio>
                                <h3>{song.artist}</h3>
                            </div>
                        )
                    })
                }
            </div>

            <div>
                <form onSubmit={handleSubmit}>
                    <label>addSong</label>
                    <input type="text" value={oneSong} onChange={(e) => setSong(e.target.value)}/>
                    <input type="text" value={Artist} onChange={(e) => setArtist(e.target.value)}/>
                    <input type="file" value={src} onChange={(e) => setSrc(e.target.value)}/>
                    <input type="submit" value="Add a Song"/>
                </form>
            </div>



        </div>
     );
}

export default SongListUI;

So when I input a song and submit, I get an error that says TypeError: songs.map is not a function

despite the fact that the songs get actually uploaded to the database !. Any help explaining that, what should I do to get working? Thanks.

Peter Ambruzs Peter Ambruzs · Accepted Answer · 2020-02-07T20:19:40

The problem is, that songs is not an array, so it has no map function. When you call setSongs you call it with an object as a parameter. You should call it with an array. Something like this:

    songbase.onSnapshot(snapshot =>{
        const songs = [];
        snapshot.docChanges().forEach(change =>{ 
            songs.push({title: change.doc.data().oneSong, aritst:change.doc.data().Artist, source: change.doc.data().src})
        })
        setSongs(songs);
    })

uploading files to firebase-firestore with react

1 Answers