@lexstile

Как правильно сообщить компоненту Movie, что тот или иной фильм рекомендован?

state: https://dropmefiles.com/cGo3r
Есть компоненты:
Movie - выводит один фильм
MovieList - выводит список Movie
Каким образом компонент Movie может узнать, что тот или иной фильм рекомендован, если рекомендации идут отдельным объектом и имеют только ссылку на 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>
    );
  }
}

Мне нужно, в зависимости от того, рекомендован фильм или нет - стилизировать Movie, как можно подготовить данные для компонента Movie, чтобы ему было просто узнать о рекомендациях?
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Суть:
const recommendation = recommendations.find(({ movieId }) => movieId === movie.id);


Поиск можно выполнять в селекторе, в колбеке movies.map, при необходимости меморизировать и тд.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы