Pass arguments to function in React (API)

Question

Today I started learning React, and I want to fetch movies from the TMDb API. I have this code:

getMovies() {
 const APIKey = "MYAPI";
 fetch(`https://api.themoviedb.org/3/search/company?api_key=${APIKey}&query=${argument}&page=1`)
 .then(function(response) {
   return response.json();
 })
 .then(function(myJson) {
  console.log(myJson);
 });
}

And in my render() I have this:

return (
  <Fragment>
    <div className="Main">
      <button onClick={this.getMovies.bind('spider-man')}>Get</button>
    </div>
  </Fragment>
)

I want to pass 'spider-man' as an argument to do the search in the TMDb API. Hope you can help me!

Harmandeep Singh Kalsi · Accepted Answer · 2020-08-10 03:26:13Z

1

This is how you can pass the parameter to the class component function, using {() => {...}} or other option could be this.getMovies.bind(this, 'spider-man')

getMovies(movie) { // your code here}

Option 1:

return (
  <Fragment>
    <div className="Main">
      <button onClick={() => this.getMovies('spider-man')}>Get</button>
    </div>
  </Fragment>
)

Option 2:

return (
      <Fragment>
        <div className="Main">
          <button onClick={() => this.getMovies.bind(this,'spider-man')}>Get</button>
        </div>
      </Fragment>
    )

edited Aug 10, 2020 at 3:26

answered Aug 10, 2020 at 3:19

Harmandeep Singh Kalsi

3,3652 gold badges17 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pramod Mali · Accepted Answer · 2020-08-10 05:43:30Z

This is mainly divided into two categories

Class components
Functional Components

Class components

Consider you have your code as follow:

getMovies(movieName){...}

render(){
    <button onClick={/*Attach event here*/}>Get</button>
}

There can be 4 ways

Using binding in the constructor, This is a recommended way of binding a method.

class Movie{
   constructor(props){
     super(props);
     this.getMovies = this.getMovies.bind(this);
   }
   getMovies(movieName){ //your code }
   render(){
       <button onClick={this.getMovies('some_movie_name')}>Get</button>
   }
}

Using binding in the render method itself. In terms of performance, it's the same as the previous one. The first one is a little cleaner for me.

class Movie{
   getMovies(movieName){ //your code }
   render(){
       <button onClick={this.getMovies.bind('some_movie_name')}>Get</button>
   }
}

Using arrow function syntax in render().

class Movie{
   getMovies(movieName){ //your code }
   render(){
       <button onClick={()=>this.getMovies('some_movie_name')}>Get</button>
   }
}

Using the arrow function in classes. This will have an impact on overall performance. You can read more about this here.

class Movie{
   getMovies = (movieName) => { //your code }
   render(){
       <button onClick={this.getMovies('some_movie_name')}>Get</button>
   }
}

Function components

Consider you have your code as follow:

function getMovies(movieName){ //your code }

return(){
    <button onClick={/*Attach event here*/}>Get</button>
}

There aren't many variations for the function component. Using either an arrow or regular function expression to define a function.

function Movie(){
   function getMovies(movieName){...} //or const getMovies = (movieName) => {...}

   return(
      <button onClick={()=>getMovies('some_movie_name')}>Get</button>
      {/*
       if not arguments
       <button onClick={getMovies}>Get</button>
     */}
  )
}

Collectives™ on Stack Overflow

Pass arguments to function in React (API)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related