Nrthugu

I am trying to get .on('value') to fire so I can retrieve data but something is not working correctly. 'Mounted' logs fine, but 'test' does not. Can somebody please explain what I am probably misunderstanding? Additionally, I would like to update the state as shown in the commented out code.

Thank you for your help!

    import React, { Component } from 'react'

import './Creature.css'

import Emblem from '../../../img/emblem_macabre.png'

import Macabre from '../../../img/macabre.jpg'

import * as firebase from 'firebase';



class Creature extends Component {



  constructor() {

    super()

    this.state = {

      name: '',

      cultId: ''

    }

  }



  componentDidMount() {

    console.log('mounted')

    const creatureCards = firebase.database().ref().child('creatureCards')

    console.log(creatureCards)

    creatureCards.on('value', snap => {

      console.log('test')

    })



      // var name = snap.child('name').getValue()

      // var cultId = snap.child('cultId').getValue()



      // this.setState({

      //   name: name,

      //   cultId: cultId

      // })

    }



  render() {

    return(

      <div className="creatureCard">

        <span className="creatureName">{this.state.name}</span>

        <span className="creatureArt"><img src={Macabre} alt=""/></span>

        <ul className="creatureAttributes">

          <li className="creatureAttribute">R</li>

          <li className="creatureAttribute">D</li>

          <li className="creatureAttribute">I</li>

          <li className="creatureAttribute">H</li>

        </ul>

        <span className="creatureDescription">

          <p>Card descriptions and abilities. This section defines the card and its roll in the game.</p>

        </span>

        <div className="emblem">

          <img src={Emblem} alt=""/>

        </div>

      </div>

    )

  }

}



export default Creature

The problem was that at some point I switched to firestore but was still making calls to the database.