Как сделать reverse DOM элементов в REACT перед перерисовкой?

Question

[lexstile]

Есть компонент:

export class Movie extends React.PureComponent<MoviePropsType> {
  render() {
    const { movie, recommended } = this.props;
    const border = recommended ? recommended.rating : '';
    return (
      <div className="movie-card">
        <div className={`movie-card card ${border}`}>
          <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>
    );
  }
}

Нужно заменить порядок прямых потомков внутри:

<div className={`movie-card card ${border}`}></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 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>
          <img className="card-img-top" src={movie.imageUrl} alt={movie.title} />

Answer 1

[0xD34F]

Добавьте свойство, которое будет отвечать за порядок элементов и переключайте его значение. Или, если важен только внешний вид, а не реально расположение элементов, задайте родителю display: flex и вешайте ему класс, который будет переопределять order у дочерних элементов.