How to properly tell the Movie component that a particular movie is recommended?

Question

JavaScript

state: https://dropmefiles.com/cGo3r
There are components:
Movie - displays a single movie
MovieList - displays a list of Movies
How can the Movie component know that this or that movie is recommended if the recommendations are a separate object and have only a link to the id?
App

class AppComponent extends React.PureComponent<AppComponentPropsType> {
  render() {
    return (
      <React.Fragment>
        <Header>
          React Movie Cards
        </Header>
        <MovieList movies={this.props.movies} />
      </React.Fragment>
    );
  }
}

MovieList

export class MovieList extends React.PureComponent<MovieListPropsType> {
  render() {
    const { movies } = this.props;
    return (
      <div className="mt-5">
        <div className="card-deck">
          {movies && movies.map(movie => (
            <Movie movie={movie} key={movie.id} />
          ))}
        </div>
      </div>
    );
  }
}

movie

export class Movie extends React.PureComponent<MoviePropsType> {
  render() {
    const { movie } = this.props;
    return (
      <div className="movie-card">
        <div className="movie-card card">
          <img className="card-img-top" src={movie.imageUrl} alt={movie.title} />
          <div className="card-body">
            <h4 className="card-title">{movie.title}</h4>
            <h6 className="card-subtitle mb-2 text-muted">{movie.subtitle}</h6>
            <p className="text-justify movie-descr">{movie.description}</p>
          </div>
          <div className="card-footer">
            <div className="clearfix">
              <div className="float-left mt-1">
                <StarRating rating={movie.rating} />
              </div>
              <div className="card-footer-badge float-right badge badge-primary badge-pill">{movie.rating}</div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

I need to style the Movie depending on whether the movie is recommended or not, how can I prepare the data for the Movie component so that it is easy for it to know about the recommendations?

Answer 1

Essence:
The search can be performed in the selector, in the movies.map callback, memorized if necessary, and so on.