Setting state from firebase database info in react js

Question

I'm trying to learn react and I'm creating a web app with firebase database and auth and the movie db api. I'm able to have a user click on a movie and add that movie to their watchlist "sends info of that movie to firebase". now I'm trying to retrieve that info, and I'm successful in doing so, but my code currently causes the browser to lock up and crashes and keeps logging endlessly and I need to force quit. I'm not sure where I'm going wrong? When I put the code that's in the render in the constructor, or in a componentDidMount, this.props.user returns null. I'm confused :(

app.js constructor

passing state to watchlist component

heres the code:

import React, { Component } from 'react'
import firebase from '../config/Firebase';

import { Container } from 'react-bootstrap';

import WatchlistMovie from './WatchlistMovie';

export default class Watchlist extends Component {
  constructor(props){
    super(props);
    this.state = {
      movies: [],
    }
  }

  render() {

    const movieRef = firebase.database().ref(`watchlist/${this.props.user}`);

    movieRef.on("value", snapshot => {
      let movies = snapshot.val();

      console.log(movies);

      let newState = [];

      for(let movie in movies){
        newState.push({
          id: movies[movie].id,
          title: movies[movie].title,
          rating: movies[movie].rating,
          poster: movies[movie].poster
        });
      }

      this.setState({
        movies: newState
      });

      console.log(this.state.movies);

    });


    return (
      <div>
        <Container>
            <WatchlistMovie
              ... send data from firebase to this individual movie component
            />
        </Container>
      </div>
    )
  }
}

Answer 1

render() {...} is not the place to fetch data. Move it to componentDidMount as below:

export default class Watchlist extends Component {
  constructor(props){
    super(props);
    this.state = {
      movies: [],
    }
  }

  componentDidMount() {
    const movieRef = firebase.database().ref(`watchlist/${this.props.user}`);

    movieRef.on("value", snapshot => {

      // I keep your logic here
      let movies = snapshot.val();

      console.log(movies);

      let newState = [];

      for(let movie in movies){
        newState.push({
          id: movies[movie].id,
          title: movies[movie].title,
          rating: movies[movie].rating,
          poster: movies[movie].poster
        });
      }

      this.setState({
        movies: newState
      });



    });
  }

  render() {

    const { movies } = this.state;


    return (
      <div>
        <Container>
            <WatchlistMovie
              ... send data from firebase to this individual movie component
            />
        </Container>
      </div>
    )
  }
}