Can not UPDATE movie in Vidly

PLEASE, HELP ME! :sleepy:

Section Calling Backend Services 24.

I can post new movie but cannot update the existing one. When I click the save button nothing happens and I see this error in the console:

Here is movieForm

import React from ‘react’;

import Form from ‘./common/form’;

import Joi from ‘joi-browser’;

import { getGenres } from ‘…/services/genreService’;

import { getMovie, saveMovie } from ‘…/services/movieService’;

class MovieForm extends Form {

state = {

    data: {

        title: "",

        genreId: "",

        numberInStock: "",

        dailyRentalRate: ""


    genres: [],

    errors: {}


schema = {

    _id: Joi.string(),

    title: Joi.string().required().label('Title'),

    genreId: Joi.required().label('Genre'),

    numberInStock: Joi.number().min(0).max(100).required().label('Number In Stock'),

    dailyRentalRate: Joi.number().min(0).max(10).required().label('Daily Rental Rate')


async populateGenres() {

    const { data: genres } = await getGenres();

    this.setState({ genres: genres });


async populateMovie() {

    try {

        const movieId =;

        if (movieId === 'new') return;

        const { data: movie } = await getMovie(movieId);

        this.setState({ data: this.mapToViewModel(movie) });

    } catch (ex) {

        if (ex.response && ex.response.status === 404)

            return this.props.history.replace('/not-found');



async componentDidMount() {

    await this.populateGenres();

    await this.populateMovie();


mapToViewModel(movie) {

    return {

        _id: movie._id,

        title: movie.title,

        genreId: movie.genre._id,

        numberInStock: movie.numberInStock,

        dailyRentalRate: movie.dailyRentalRate



doSubmit = async () => {

    await saveMovie(;



render() {


import http from ‘./httpService’;

import config from ‘…/config.json’;

const apiEndPoint = config.apiUrl + ‘/movies’;

export function getMovies() {

return http.get(apiEndPoint);


export function getMovie(id) {

return http.get(apiEndPoint + '/' + id);


export function deleteMovie(movieId) {

return http.delete(apiEndPoint + '/' + movieId);


export function saveMovie(movie) {

if (movie._id) {

    const body = { };

    delete body._id;

    return http.put(apiEndPoint + '/' +, body);


return, movie);



import axios from ‘axios’;

import { toast } from ‘react-toastify’;

axios.interceptors.response.use(null, error => {

const expectedError = error.response && error.response.status >= 400 && error.response.status < 500;

if (!expectedError) {

    console.log('Logging error: ', error);

    toast.error('An unexpected error occured');


return Promise.reject(error);


export default {

get: axios.get,


put: axios.put,

delete: axios.delete


Hi Anas,

I do believe your code is nothing wrong. The Error 500 is means from server. It happens to me before. I believe that libraries you installed not matching with lessons. Have look the json file in the folder in finished and compare with your json file and see.
My solution is I deleted my json file and re-installed library according to json file in finished folder and works well.

I hope this could help you.


1 Like

The error says that the API endpoint that was hit was /api/movies/undefined . This means that somewhere in the code where you are setting the URL, the movie ID is not being set correctly.

So in your movieService.js file, replace with movie._id in the following line:

return http.put(apiEndPoint + '/' +, body);
1 Like

Hello Thang,
Thanks for our support! I have tried it but with the json file of Mosh my app seems not working at all :grimacing:

Hello Sufian,
I also thought about that, however it didnt solve the problem. Can I ask you to share your json file ?

I took the course in 2020 so I’m afraid I don’t even have that file and even if I have it, it will be similar to what Mosh has.

Maybe you could share the error log when you make the changes I suggested in my previous post? And if you still face a problem, you can post the error log here and I’ll take a look.

Just make sure you again reply to my comment so I get notified.

Have a great day. :slightly_smiling_face:

I would like to, but after making some changes in the json file my app broke completely and my original json file is somehow got lost, thats why I was asking yours :sweat_smile: So Im just following Mosh course without my app running. As Im almost at the end its fine… Thanks for your help! :smiley:

How comes it not working ? It’s weird. It works for me as what I did is deleted my json file and then lookup dependencies from json file in the finished folder of the section and re-installed libraries which should be matched with version of the json file in the finished folder and then connected to Mongodb and all functions (insert new movie, update movie, delete movie and sorting) are working well.

OR you can give it a try compare your code with the code in the finished folder and see any different ? Trying from one to one. Ensuring files are store in the right path and import probably.


But are you doing the course now?

1 Like

Hi Anas,

Yupe, i enrolled and still learning the course. My journal is up to Authentication and Authorization Section.

I am still a newbie and want to learn from others as much as i could.


Hey everyone. I have just finished adding config files and my movies app shows i have no movies in the database. can anyone help ?
xhr.js:173 GET http://localhost:3900/api/ 404 (Not Found)
createError.js:17 Uncaught (in promise) Error: Request failed with status code 404
at createError (createError.js:17:1)
at settle (settle.js:19:1)
at XMLHttpRequest.handleLoad (xhr.js:78:1)