0
import React from "react";

const MovieList = (props) => {
  const movieClicked = (movie) => (evt) => {
    props.movieClicked(movie);
  };

  return (
    <>
      {props.movies &&
        props.movies.map((movie) => {
          return (
            <div key={movie.id}>
              <h2 className="text-xl" onClick={movieClicked(movie)}>
                {movie.title}
              </h2>
            </div>
          );
        })}
    </>
  );
};

export default MovieList;

Kindly explain in detail what onClick={movieClicked(movie)} and

const MovieList = (props) => {
    const movieClicked = movie => evt => {
        props.movieClicked(movie)
    }

are doing? I made this component following an online tutorial however I am having difficulty understanding what is really happening here

davidhu
  • 9,523
  • 6
  • 32
  • 53
Shaheer
  • 31
  • 5
  • `movieClicked(movie)` returns a handler function that when called on click still has the `movie` variable in scope. Maybe check out a tutorial on first-class and higher-order functions in JS. If that's confusing you can also write it like `onClick={() => handleClick(movie)}` and remove the extra `movieClicked = movie =>` wrapper. BTW, please pick titles that are actually searchable and describe the technical problem. – ggorlen Jul 24 '22 at 02:44
  • I wound up adding a [detailed post](https://stackoverflow.com/a/73095591/6243352) to the canonical for currying. – ggorlen Jul 24 '22 at 04:01

0 Answers0