Not able to re-render the page after deleting the value in firebase database.This.setState is not working

Question

I am able to delete the value in firebase database.But the deleted value is still present in the web page.

I was able to get the new list item (which dont have the deleted item) after deleting , when try to set the new values to this. state. It's not working

import * as firebase from "firebase";

import React, { Component } from 'react'
import { Jumbotron ,Card,Button} from "react-bootstrap";

class ViewBooks extends Component {

constructor(props){
    super(props)
    this.state = {
       Books:[]
    }

    this.removeBook = this.removeBook.bind(this);
}

componentDidMount ()
{
    this.db = firebase.database();
    this.listenForChange();
}
listenForChange(){


firebase.database().ref("Books").on('child_added',snapshot => {let book = {
        id:snapshot.key,
        bookname:snapshot.val().bookname,
        authorname:snapshot.val().authorname,
        aemailid:snapshot.val().aemailid,
        title:snapshot.val().title,
        count:snapshot.val().count,
        isbn:snapshot.val().isbn,}

    let books = this.state.Books
    books.push(book);

    this.setState = {
        Books:books
    };console.log("lenght is "+this.state.Books.length)
}) 


firebase.database().ref("Books").on('child_removed',snapshot => {
        let books =  this.state.Books;
        books = books.filter(book => book.id !== snapshot.key);
        console.log(books);
        this.setState = {
        Books:books
};
console.log(this.state.Books);
console.log("Deleted "+this.state.Books.length)})


}



removeBook(id){
    firebase.database().ref('Books').child(id).remove();

}
render() {
    return (
        <div>

              {this.state.Books.map(book => (

                <div>
                    <Card key = {book.id}>
                    <Card.Header as="h5">{book.bookname}</Card.Header>
                    <Card.Body>
                    <Card.Title>{book.title}</Card.Title>
                    <Card.Text>
                        Author : {book.authorname}<br/>
                        Email id : {book.aemailid}<br/>
                        ISBN : {book.isbn}<br/>

                    </Card.Text>
                    <Button variant="danger" onClick ={ () => this.removeBook(book.id)}>Delete Book</Button>
                    </Card.Body>
                    <Card.Footer className="text-muted">count : {book.count}</Card.Footer>
                    </Card>
                    <br/>
                </div>

              ))}

        </div>
    )
}
}
export default ViewBooks;

Answer 1

You are reassigning this.setState to an object this.setState is a function

this.setState = {
    Books: books
};

and you are also mutating the original state when you do

let books = this.state.Books;
books.push(book);

which is still the same object reference and React won't re-render because of it.

You will need to create a copy of the state object and then mutate it using the spread syntax

let Books = { ...this.state.Books };

Then you can mutate it before you pass it into this.setState

listenForChange() {
  firebase
    .database()
    .ref("Books")
    .on("child_added", snapshot => {
      let book = {
        id: snapshot.key,
        bookname: snapshot.val().bookname,
        authorname: snapshot.val().authorname,
        aemailid: snapshot.val().aemailid,
        title: snapshot.val().title,
        count: snapshot.val().count,
        isbn: snapshot.val().isbn
      };

      let books = { ...this.state.Books }; // create a copy of this.state.Books
      books.push(book);

      this.setState({ // call this.setState function with the updated books
        Books: books
      }, () => console.log("lenght is " + this.state.Books.length)); 
    });

  firebase
    .database()
    .ref("Books")
    .on("child_removed", snapshot => {
      this.setState(prevState => ({ // You can also get the current state passing a callback to this.setState
        Books: prevState.Books.filter(book => book.id !== snapshot.key)
      }));
      console.log(this.state.Books);
      console.log("Deleted " + this.state.Books.length);
    });
}