Why is my state getting mapped one too many times in ReactJS?

Question

Hello i'm trying to map my data, which i feched from my Firebase, into a Row of Cards. But since i have the state defined in my constructor, one card gets returned with no values at the start. what can i do to avoid the returning of this first empty Card Component ? Thanks in advance.
(the Card Component is a Component with a Thumbnail which i imported)

class  List extends Component {
      constructor(props){
        super(props)

        this.db = firebase.database().ref().child('app').child('cards');

        this.state = {
            cards: [
              {
                id: "",
                cardDesc: "",
                cardPrice: "",
                cardHeading: "",
              }
            ]
          }
        }

      componentWillMount (){
        const previousCards = this.state.cards

        this.db.on('child_added', snap => {
          previousCards.push ({
            id: snap.key,
            cardDesc: snap.val().cardDesc,
            cardPrice: snap.val().cardPrice,
            cardHeading: snap.val().cardHeading,
          })
          this.setState ({
            cards: previousCards
          })
        })
      }

      render(){
        return(
          <div className='list'>
          <Row>
          { this.state.cards.map((card) => {
            return(<Card cardHeading={card.cardHeading} cardDesc={card.cardDesc}
               cardPrice={card.cardPrice} key={card.id} />)
                })
          }
          </Row>
          </div>
        )
      }
    }

    export default List

Answer 1

You can just remove your initial setup for the state and change your render method to say

this.state.cards && this.state.cards.(your stuff)