index.js

import React, { Component } from 'react';
import './video-catalog.scss'
import classnames from 'classnames'


class VideoCatalog extends Component {

    handleClick = (i) => {
        this.props.handleClick(i)
    }

    render() {
        return (
            <div className='video-catalog'>
                <ul>
                    {
                        this.props.videoCatalog.map((item, index) => {
                            return (
                                <li key={item.id}
                                    className={classnames({active: this.props.activeIndex === index})}
                                    onClick={this.handleClick.bind(this, index)}
                                >
                                    <span className="title">{item.name}</span>
                                    <span className='duration'>{item.duration}</span>
                                    <i className={classnames(`iconfont`,
                                        [item.video_auth === 0
                                            ? 'iconiconfront-74'
                                            : 'iconiconfront-35'],
                                    )}/>
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        );
    }
}

export default VideoCatalog;