app.js

import React, { Component } from 'react';
import './App.css';
import Card from './Card/Card';
import DrawButton from './Drawbutton/DrawButton';
import 'firebase/database'
import fb from './config/firebase/db_config'
console.log(fb);

class App extends Component {
  constructor(props) {
    super(props);

    this.database = fb.database().ref().child('cards');
    this.updateCard = this.updateCard.bind(this);
    this.state = {
      cards: [
        {
          id: 2, eng: "play", ger: "spielen"
        }
      ],
      currentCard: {}
    }
      ;
  }

  UNSAFE_componentWillMount() {
    const currentCards = this.state.cards;

    /**this.database.child('child_added' , snap => {
        currentCards.push({
            id: snap.key,
            eng : snap.val().eng,
            ger : snap.val().ger
        });
    });**/
    this.setState({
      cards: currentCards,
      currentCard: this.getRandomCard(currentCards)
    });
  }

  updateCard() {
    const currentCards = this.state.cards;
    this.setState({
      currentCard: this.getRandomCard(currentCards)
    })
  }

  getRandomCard(currentCard) {
    let card = currentCard[Math.floor(Math.random() * currentCard.length)]
    return card;
  }


  render() {
    return (
      <div className="App">
        <Card eng={this.state.currentCard.eng} ger={this.state.currentCard.ger} />
        <DrawButton drawCard={this.updateCard} />
      </div>
    );
  }
}

export default App;