What is the best practice to "re-render" a Component in React? - node.js

Question

I have an array of items mapped, and when I delete an item, it deletes in the database, and if I manually refresh the page it is gone. However, I want to "re-render" the list of items, once I click the delete button. From what I can find, is I need a state change to "re-render", so I tried setting up a boolean, but It doesn't "re-render". Any suggestions on best practice to achieve this result would be helpful.
class Profile extends Component {
state = {
username: '',
movies: [],
reRender: false <---- by changing this state, I want a re-render of the component
}
getUserMovies = () => {
const token = localStorage.usertoken;
const decoded = jwt_decode(token);
axios.post('/getusermovies', {
user: decoded.username
}).then(response => {
this.setState({
username: decoded.username,
// movieName: response.data.moviename
movies: response.data
})
console.log(response.data)
}).catch(error => {
console.log(error + "err in the front end getusermovies function")
})
}
componentDidMount() {
this.getUserMovies();
}
deleteMovie = (itemId) => {
axios.post('/delete', {
movie: itemId
}).catch(err => {
console.log(err + "in the deleteMovie function in front end" + itemId)
})
this.setState(prevState => ({
reRender: !prevState.reRender <------ This is where I am calling a state.
}))
}
render() {
let movies = this.state.movies;
return (
<div className="container">
<h1>{this.state.username}'s Movies: </h1>
<div className="row">
{movies.map(item =>
<div className="profile-movies-box" >
<img src={item.movie} alt='no image' className="movies-box-img" />
<h4>{item.moviename}</h4>
<button className="movie-buttons">
<Link to={{
pathname: `/movie?movieName=${item.moviename}`,
state: { link: item.moviename }
}}>View Movie</Link>
</button>
<button
className="movie-btn"
value={item.moviename}
onClick={() => { this.deleteMovie(item.moviename) }}
>Delete Movie</button>
</div>
)}
</div>
</div>
);
}
}
export default Profile;

Answer 1

You need to update movies array, remove item that has been deleted
deleteMovie = (itemId) => {
axios.post('/delete', {
movie: itemId
})
.then(res => {
this.setState(prevState => ({
movies: prevState.movies.filter(m => m.id !== itemId)
}));
})
.catch(err => {
console.log(err + "in the delteMovie function in front end" + itemId)
})
}
I would recommend using async await
deleteMovie = async (itemId) => {
try {
await axios.post('/delete', {
movie: itemId
});
this.setState(prevState => ({
movies: prevState.movies.filter(m => m.id !== itemId)
}));
} catch (err) {
console.log(err + "in the delteMovie function in front end" + itemId)
}
}