react-awesome-slider-new/src/hoc/captioned-images/hoc.js

React Awesome Slider is a 60fps performant, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider carousel.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default function CaptionedHoc(WrappedComponent) {
  return class extends Component {
    static propTypes = {
      screens: PropTypes.array.isRequired,
    };

    renderScreens() {
      return this.props.screens.map((screen, index) => (
        <div
          key={`${this.props.name}-screen-${index}`}
          data-src={screen.media}
          style={{
            backgroundColor: screen.backgroundColor,
          }}
        >
          <div data-type="caption">
            <p>{screen.caption}</p>
          </div>
        </div>
      ));
    }

    render() {
      return (
        <WrappedComponent {...this.props}>
          {this.renderScreens()}
        </WrappedComponent>
      );
    }
  };
}