Master React - Section 7 Forms

React
1

Hi all,

I am at lectures 22 & 23, section 7: Forms of “Master React”.

I have followed Mosh’s code review at lecture 23 but I am still having some problems with my application:

Problem 1: After implementing Mosh’s code, when I click the ‘New Movie’ button I get a ‘Not found’ component instead of getting the empty movie form. My efforts at debugging have led me to this method in the MovieForm component:

componentDidMount() {
    const genres = getGenres();
    this.setState({ genres });

    const movieId = this.props.match.params.id;
    if (movieId === "new") return;

    const movie = getMovie(movieId);
    if (!movie) return this.props.history.replace("/not-found");

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

I don’t remember implementing something where we could give a movie an id of “new” anywhere in the project and this was not covered in Mosh’s code review, and then I think where it says “if (!movie)” replace the movie with the not found component is where the problem is.

If I comment out this method in the component then when I click the “New Movie” button I get my MovieForm component as intended.

EDIT: Did I need to change something on my Route for ‘movies/new’?

Problem 2: When clicking on a movie title, it does take me to the MovieForm component with all the details are filled in except the genre. I have investigated but I am not really sure where to start with this one.

Can anyone help? I don’t really want to proceed with the rest until this stuff is fixed.

Cheers

2

Hi ben79,

I went throught the step. Could you please provide the full code of this page. I think you are working on the movieForm. This form should be extends Form.

ben79-movieForm
ben79-movieForm798×511 15.5 KB

Regards,
Thang

3

Hi Thang,

I was able to figure it out, I realised I added an extra route for my new movie form which was not necessary so when I commented it out, I was able to get the movie form from pressing the new movie button:

<Switch>
        {/* <Route path="/movies/new" component={MovieForm} /> */}
        <Route path="/register" component={RegisterForm} />
        <Route path="/login" component={LoginForm} />
        <Route path="/movies/:id" component={MovieForm} />
        <Route path="/movies" component={Movies} />
        <Route path="/customers" component={Customers} />
        <Route path="/rentals" component={Rentals} />
        <Route path="/not-found" component={NotFound} />
        <Redirect from="/" exact to="/movies" />
        <Redirect to="/not-found" />
      </Switch>

That route worked fine in my initial implementation but when I added the logic in the ComponentDidMount with Mosh then the conditional statement broke my route. So seems like that was the problem. I can add a new movie now. Thanks for your help :slight_smile:

2 Likes
4

Hi Ben79,

It’s awesome you found the issues and solved it. I am on the track and stuck at of updating and add new a movie which required connect to MongoDB. It’s seem like libraries were not matching and thought our errors. I am waiting for support.

Regards,
Thang

5

Hi Ben79,
True, in all the previous lectures we didnt implement smth similar, and Im a little bit frustrated with the task as well. In the solution Mosh could at least explain everything in more details.
And that phrase of him just killed me : if you can not make it you will not be able to work on the real React project :roll_eyes: Very inspiring :sweat_smile:

1 Like
6

Hi Anas,

Ben79 has solved the problem. I do believe you could get through as well. Give it a try again. There is nothing wrong with lessons.

Regards,
Thang

7

Hey,
I have managed to solve my problem thanks to this discussion :slight_smile: Just have no idea how a person can make the task without looking to Mosh Solution.

Regards,
A.D.

1 Like
8

Hi A.D,

It’s awesome. you did it.

I have no idea as well. Anyway, I am really enjoy the course. I hope you too

Regards,
Thang

9

Agree, Mosh courses are the best on the Internet for now.

1 Like
10

Hi guys in the same vein as this topic, I am having trouble with the Genre drop down. I have gone over it and over it, and can not see my issue anyone have any insight

11

Nevermind - i fixed - i secretly love and hate coding