setState doesn't update array with firebase object

Question

So the problem I'm having is that the setState method doesn't seem to want to update the state of my array questions. But when I use console.log(returnArr) the console prints my desired item from firebase.

What I'm I doing wrong?

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      questions: [],
      current_question: 0
    };
  }

  componentDidMount() {
    var rootRef = firebase.database().ref();
    var ref = rootRef.child("Geography");
    var returnArr = [];

    ref
      .once("value")
      .then(function(snapshot) {
        snapshot.forEach(function(childSnapshot) {
          var item = childSnapshot.val();
          item.key = childSnapshot.key;

          if (item.key === "2") {
            returnArr.push(item.Question);
            setState = () => ({
              questions: returnArr
            });
            console.log(returnArr);
          }
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    // ...
  }
}

Tholle · Accepted Answer · 2018-08-11 12:38:57Z

setState is a function you should call, not an object you should assign a new value to.

If you want to use this inside the firebase callback function you must either bind the function to this or use an arrow function. You most likely want to set the array in state after the entire snapshot has been processed.

Example

class App extends React.Component {
  // ...

  componentDidMount() {
    firebase
      .database()
      .ref()
      .child("Geography")
      .once("value")
      .then(snapshot => {
        const questions = [];

        snapshot.forEach(childSnapshot => {
          const item = childSnapshot.val();
          item.key = childSnapshot.key;

          if (item.key === "2") {
            questions.push(item.Question);
          }
        });

        this.setState({ questions });
      })
      .catch(error => {
        console.error(error);
      });
  }

  // ...
}

jonathanrz · Accepted Answer · 2018-08-11 10:49:13Z

0

You are not calling setState, you are redefining it.

Change the if to this:

if(item.key === '2'){
  returnArr.push(item.Question)
  this.setState({
      questions: returnArr
  });
  console.log(returnArr)

}

Also, you probably want to call setState after the forEach has ended. In the way you implemented, setState will be called each time the if code is executed. Moving the setState call out of the forEach will make the setState to be called just once.

answered Aug 11, 2018 at 10:49

jonathanrz

4,3166 gold badges38 silver badges59 bronze badges

1 Comment

stoppaduvan Over a year ago

Thanks! I get what you're saying but now I get this error instead: 12:56:21: this.setState is not a function. (In 'this.setState({ questions: returnArr })', 'this.setState' is undefined)

Collectives™ on Stack Overflow

setState doesn't update array with firebase object

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related