React Crash Course for Beginners, Part 4

onSubmit={(e) => this.addNewMovie(e)}

Then, add the addNewMovie() method to the top of the  component class:

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  console.log(movie);
}

The first task is to prevent the default submission event from firing, which we do with e.preventDefault(). Otherwise, when the form is submitted, the web page will automatically refresh, which is not what we want.

Then, we create a new movie object by grabbing the form input field values we conveniently stored as component class properties earlier.

A console.log() command outputs the movie object so we can test it’s being created correctly upon form submission.

Once you’re satisfied the movie object is being correctly generated, go ahead and delete the console.log() call.

In order to display the new movie in our gallery, we need to add it to the movie state object. Once this is done, React will take care of updating the DOM for us.

To accomplish this, create a new method in App.js (where the app state object lives) to handle adding a movie to the current state.

addMovieToGallery( movie ) {
  console.log( 'mooooooovie', movie );
}

Don’t forget to bind the new method to the this so it’s available throughout the class.

this.addMovieToGallery = this.addMovieToGallery.bind( this );

Incidentally, you may wonder why we needed to do this here but not for the addNewMovie() method we added to the  component above. This is a side effect of using an ES6 arrow function, as it automatically binds this for you. This little trick is well worth remembering as it reduces the code complexity, whilst improving your code’s readability.

To use addMovieToGallery() in our  child component code, we simply pass down a reference to it via props. In App.js, update the  call to be:

Back in AddMovie.js, update the addNewMovie() method to pass the movie object to the addMovieToGallery() method via the addMovie prop we just created.

addNewMovie(e) {
  e.preventDefault();
  var movie =  {
    title: this.title.value,
    year: this.year.value,
    description: this.description.value,
    poster: this.poster.value
  };
  this.props.addMovie( movie );
}

Now, when we fill out the form, we get the movie object outputted to the console, as before, but this time it’s via the addMovieToGallery() method in the  component.

Delete the console.log() command in addMovieToGallery() and replace it with the following code to add the entered movie details to the movies state object:

addMovieToGallery( movie ) {
  var ts = Date.now();
  var newMovie = {};
  newMovie[ 'movie' + ts ] = movie;
  var currentMovies = { ...this.state.movies };
  var newMovies = Object.assign( currentMovies, newMovie );
  this.setState({ movies: newMovies });
}

This is pretty similar to what we did in part three for the loadAdditionalMovies() method. The main difference is that a unique key needs to be generated, on the fly, for each additional movie entry. This is achieved by using the current time stamp as the unique key and appending it to movie.

This will result in each additional movie, added via the form, having unique keys.

movie1501686019706
movie1501686027906
movie1501686032929

… and so on.

Open up the ‘Movie Mojo’ app in the browser and add two new movies to the gallery via the form. There are extra movie poster images added to the ./public/posters/ folder for convenience, so you can easily test adding movies to the gallery. You can access these by downloading the finished app project.

Each time you submit the form, an additional movie is added to the gallery!

Installing Movie Mojo

Click the link to the right (about halfway down the page) to download the finished ‘Movie Mojo’ project zip file. Once it’s extracted, open a command-line window and navigate to the movie-mojo directory, and enter:

npm install

This will take a few minutes to download all the ‘Node.js’ modules needed to run the project.

Then type:

npm start

This will compile the React app and open it in a browser via a dedicated mini web server.

Conclusion

We’ve covered quite a lot in this four-part tutorial series, so congratulations if you’ve made it all the way through and followed along with the code.

You should now feel comfortable with the basics of React, and this will hopefully give you the confidence to go on and build more complicated apps.

I’d recommend downloading the ‘Movie Mojo’ project and examining the source code to make sure you understand how it all fits together.

There’s lots of scope to extend the app, so why not try to come up with some new extra features? This is also a great way of cementing your learning, by attempting to implement new React elements to the app.

Here are some ideas you could consider adding:

• Add UI and code to remove movies from the gallery.
• Allow sorting by movie title, year, etc.
• Introduce a ratings system.

I’d love to hear any feedback you might have about this tutorial via the comments below. Did you find it easy to follow, or were there parts you struggled with? I’m always looking to make my tutorials better, so feedback is always very welcome.

Happy React coding!