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>
    )
  }
}

no error in terminal, console just keeps logging (this.state.movies) causing browser to crash — juicy j
– juicy j, Commented Mar 13, 2019 at 4:16
Hi, You can't call setState inside render function as changing the state re-renders the component so you get a infinite loop where your render function calls setState and because of setState your render functions gets called again. You need to take this code and put it in componentDidMount lifecycle function — Rishabh Rawat
– Rishabh Rawat, Commented Mar 13, 2019 at 4:18
Hey Rishabh, when i put it in a componentDidMount lifecycle, this.props.user is recieved as null — juicy j
– juicy j, Commented Mar 13, 2019 at 4:20

Ponleu · Accepted Answer · 2019-03-13 05:08:32Z

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>
    )
  }
}

Collectives™ on Stack Overflow

Setting state from firebase database info in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related