ReactJS - How to pass method to component and how to pass arguments to method

Introduction

In the ReactJS project, you are having aa parent component and a child component. Let’s assume, we have a Movie and MovieList component.

MovieList is a parent component and is maintaining the list of movies. I want to have the add/remove method in this component. So, this is the correct place to have the remove method. But, this method will be called from the child component: Movie.

We will see how to pass the method reference from parent component to child component and how child component uses that method and pass the argument to the parent component.

Parent Component - MovieList

import React, { Component } from "react";
import Movie from "../Movie";

export default class TourList extends Component {
  state = {
    movies: [
      {
        id: 123,
        name: 'Test 1'
      },
      {
        id: 234,
        name: 'Test 2'
      }
    ]
  };
  removeMovie = (id) => {
    const { movies } = this.state;
    const filteredMovies = movies.filter(movie => movie.id !== id);
    this.setState({
      tours: filteredMovies
    });
  };
  render() {
    return (
      <section>
        {this.state.movies.map(movie => (
          <Movie key={movie.id} movie={movie} removeMovie={this.removeMovie} />
        ))}
      </section>
    );
  }
}

In this parent component, we are having an array of movies. And is rendering the Movie component from this component. This parent component has a method removeMovie which takes an argument movie-id. We are passing this method reference to Movie component via props.

Child Component - Movie

import React, { Component } from "react";
export default class Movie extends Component {
  render() {
    const { id, name } = this.props.movie;
    const { removeMovie } = this.props;

    return (
      <article>
        <h2>{name}</h2>
        <span onClick={() => removeMovie(id)}>
          <i className="fas fa-window-close" />
        </span>
      </article>
    );
  }
}

Note the interesting things:

• We are accepting props. No need to write a constructor for this.
• We are getting the values and the reference of removeMovie method.
• In the render method, we have to configure this method on the click of an icon.
• Note, we can not write removeMovie(id) as it will call the method. So, the trick is to write a method in which we are calling the reference method.

This is a very helpful trick in passing the reference of methods to some lower levels of components.