Reload user after deleting an item from it with React

Question

Using React.Js When trying to delete users from the end of the list the deleted users are replaced by the last item in the list. Only on page refresh do the deleted users actually go away and the user list updates.The back-end is work because I can delete the user but I need to refresh to see a new update

const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});



const combinedStyles = combineStyles(popupStyles, UserPageStyles);

export default function RemoveUser(props) {
    const global = useContext(GlobalContext);
    const [open, setOpen] = React.useState(false);
    let org = {}
    if (global.state.selectedOrg && Object.keys(global.state.selectedOrg).length !== 0) {
        org = global.state.selectedOrg
    } else if (global.state.defaultOrg && Object.keys(global.state.defaultOrg).length !== 0) {
        org = global.state.defaultOrg
    }
    const handleClickOpen = () => {
        setOpen(true);
    };

    const handleClose = () => {
        setOpen(false);
        props.handleClose();
    };
    const handleSubmit = async () => {
        let result = await global.api.removeAccount({
            id: props.account._id,
            role: global.state.user && global.state.user.document.roles[0] || '',
            accountRole: props.type === 'patients' ? 'patient' : props.type === 'providers' ? 'doctor' : props.type === 'moas' ? 'oa' : props.type === 'admins' ? 'healthOrgAdmin' : props.type,
            org: org._id,
            username: props.account.username,
        });
        if (result && result.status === 200) {
            handleClose();
            props.refresh();
        } else {
            alert('Unable to remove account.');
        }
    }

    const classes = combinedStyles();

    return (
        <div>
            <ButtonBase className={props.className} onClick={handleClickOpen}> <Typography className={classes.typography}>Remove</Typography></ButtonBase>

            <Dialog
                open={open}
                TransitionComponent={Transition}
                keepMounted
                onClose={handleClose}
                aria-labelledby="alert-dialog-slide-title"
                aria-describedby="alert-dialog-slide-description"
            >

                <DialogTitle className={classes.dialogTitle} id="alert-dialog-slide-title">Remove Account<IconButton onClick={handleClose} className={classes.dialogClose} children={<ClearIcon />} /> </DialogTitle>
                <DialogContent>
                    <DialogContentText className={classes.contentText}>
                        Are you sure you want to remove {props.account.contact_name}'s account? You will not be able to revert this.
                    </DialogContentText>
                </DialogContent>

                <DialogActions className={classes.dialogAction}>
                    <Button onClick={handleClose} color="primary" className={classes.actionBtn}>
                        Cancel
                    </Button>
                    <Button onClick={handleSubmit} color="primary" className={classes.actionBtn}>
                        Yes
                    </Button>
                </DialogActions>
            </Dialog>
        </div>
    );
}

Answer 1

There are many tricks to re-render your react components :

1. Re-render component when state changes Any time a React component state has changed, React has to run the render() method. So you maybe you should affect your users list to a state so that when the list of users change (the state) it re-render your component.
2. Re-render component when props change
3. Re-render with key prop
4. Force a re-render by this.forceUpdate();

Take a look on that Methods to force a re-render in React

Answer 2

Usually after the delete request completes (with a 200) you would have to set some new state to trigger a re-render. Do you have a list of all the users in state somewhere? you need to do something like setUsers(users.filter(u => u.id !== deletedUserId))