Update the list after a delete request

1

Hi, I am a React beginner. I am building a React Post Memo app. I get the data from firebase on the parent component User.js, and render it out to my child component MemoGrid.js. I am able to do axios.delete to remove an item from my database. But the child component MemoGrid.js won’t be updated immediately unless I refresh the page or go to another page. I am stuck with this issue for 2 days. I hope someone can help me.

User.js

import React, { Component } from 'react'
import firebase from "firebase"
import axios from 'axios'

import Grid from '@material-ui/core/Grid';

import app from '../../base'
import MemoGrid from '../MemosGrid/MemoGrid'
import UserProfile from '../UserProfile/UserProfile'

class User extends Component{
    state = {
        memos: {},
        didAuth: false,
        userId: null,
        userName: "",
        userIcon: null
    }

    componentDidMount() {
        firebase.auth().onAuthStateChanged(user => {
            let displayName

            if(user) {
                if(!user.displayName) {
                    displayName = user.email
                } else {
                    displayName = user.displayName
                }

                this.setState({
                    didAuth: true,
                    userId: user.uid,
                    userName: displayName,
                    userIcon: user.photoURL
                })

                this.loadUserMemo()
            }
        })
    }

    authenticate = (provider) => {
        const authProvider = new firebase.auth[`${provider}AuthProvider`]()
        app.auth().signInWithPopup(authProvider)
    }


    loadUserMemo() {
        axios.get('/memos.json')
        .then(response => {
            let arr = {...response.data}
            this.setState({
                memos: arr
            })
        })
    }

    updateMemosList() {
        
    }

    render() {

        const isLoggedIn = this.state.didAuth
        let logined

        if(isLoggedIn) {
            logined = 
                        <UserProfile 
                            userData={this.state.didAuth}
                            name={this.state.userName} 
                            userIcon={this.state.userIcon}  
                        />
        } else {
            logined = null
        }

        let userData = <p>Failed to load User Data</p>

        if(this.state.memos) {
            userData = Object.keys(this.state.memos).map((memo) => {

                let key = memo

                let userArr = [...Array( this.state.memos[memo] )]

                return userArr.map(memo => {
                    if(memo.uid === this.state.userId) {                        
                        return <MemoGrid 
                                    notes={userArr} 
                                    url={this.props.match.path}
                                    key={new Date().valueOf()} 
                                    datakey={ key }
                                    userId={this.state.userId}
                                    onUserPage={ true }
                                    memos={userArr}
                                    />
                    }
                })
            })
        }
        

        return(
            <>  
                <Grid container spacing={16}>
                    { logined }
                    <Grid container item xs={12} spacing={24}>
                        { userData }
                    </Grid>
                </Grid>
            </>
        )
    }
}

export default User

MemoGrid.js

import React, { useState, useEffect } from 'react';
import axios from 'axios'
import PropTypes from 'prop-types';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import FavoriteIcon from '@material-ui/icons/Favorite';
import { withStyles } from '@material-ui/core/styles';

const styles = theme => ({
    root: {
      color: theme.palette.text.primary,
    },
    icon: {
      margin: theme.spacing.unit,
      fontSize: 32,
      cursor: 'pointer'
    },
  });

const MemoGrid = (props) => {

    const [newMemoList, setNewMemoList] = useState({})
    const [deleted, setDeleted] = useState(false)

    const { classes } = props;    

    useEffect(() => {
        setNewMemoList(props.memos)
    }, [])

    function deleteMemo(index) {
        
        

        let memoUser = props.notes
        let myMemoId

        memoUser.map((myMemo) => {
            myMemoId = myMemo.uid
            return myMemoId
        })
        
        if(props.userId === myMemoId) {
            axios.delete(`/memos/${props.datakey}.json`)
        }

        memoUser.splice(0, 1);
        console.log(memoUser)
    }


    const memoList = props.notes.map(memo => {
        return(
                <Grid item xs={6} sm={4} key={memo.id} datakey={memo.datakey}>
                    <Card className="memoPaper">
                        <div 
                            className="memo" >
                            <h3>{memo.author}</h3>
                            <p>{memo.message}</p>
                            { props.onUserPage ? <DeleteIcon className={classes.icon} onClick={deleteMemo} /> : null }
                            <IconButton aria-label="Add to favorites">
                                <FavoriteIcon />
                            </IconButton>
                        </div>
                    </Card>
                </Grid>
        )
    })

    return(
        <>      
            { memoList }
        </>
    )
}

MemoGrid.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MemoGrid)
2

Are you updating your state after you delete the item in the database? (Which database is it? Firebase realtime db or firestore? or any other? )

// This is mutating your `props.notes` array.
// Never mutate your props or state in React.
// Perhaps store this in your state and
// update your state instead of mutating
memoUser.splice(0, 1);
3

I am using Firebase realtime db.

Thank you for the trip. I update the state instead of mutate it

4

Did it work?
And also if you’re using firebase realtime db, then it’s best to listen for the changes and keep your state in sync all the time rather than querying it once and manually updating the state. And use firebase SDK methods instead of axios.

5

It doesn’t work. I check React chrome extension, the state and props did not change after I’d removed the data. But the data is removed immediately after the onClick function.

6

I finally figured out the problem. I forgot to call the loadData() function after the onClick function. It updated data dynamically :smiley: