<file_sep>import React, { Component } from 'react';
import ErrorComponent from './ErrorComponent';
import MovieListDetails from './MovieListDetails';

export default class MovieList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: ''
    }
  }
  render() {
    const { movieList } = this.props;
    return (
      <>
        {movieList.Response ? <MovieListDetails movieDetails={movieList.Search}/> : <ErrorComponent error={movieList} />}
      </>
    );
  }
}
<file_sep>import React, { Component } from 'react'

export default class VideoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            items: Array.from({ length: 10 })
        };
    }
    render() {
        // eslint-disable-next-line no-unused-vars
        const {searchList,recordsPerPage,totalRecords} = this.props;
        return (
            <ul className="full-list">
                {searchList.map(list =>
                    <li key={list.etag}>
                        <iframe title={list.snippet.title} src={`https://www.youtube.com/embed/`+list.id.videoId} frameBorder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
                        <h6>{list.snippet.title}</h6>
                        <p>{list.snippet.description}</p>
                        <a href={`https://www.youtube.com/watch?v=`+list.id.videoId} target="_blank" rel="noopener noreferrer">Play More</a>
                    </li>
                )}
            </ul>
        )
    }
}
<file_sep>import React, { Component } from 'react'

export default class MovieListDetails extends Component {
    render() {
        const { movieDetails } = this.props;
        return (
            <>
                <ul className="movie-list">
                    {movieDetails.map(movie => 
                        <li id={`movie`+movie.imdbID+movie.Title} key={`movie`+movie.Year+movie.imdbID+movie.Title}>
                            <div className="movie-card-image">
                                <img src={movie.Poster === 'N/A' ? `http://henrycavill.org/images/Films/2013-Man-of-Steel/posters/3-Walmart-Superman-a.jpg` : movie.Poster} alt={movie.Title} />
                            </div>
                            <div className="movie-card-body">
                                <h6 className="movie-card-title">{movie.Title}</h6>
                                <div className="movie-card-details">
                                    <div className="movie-card-year">
                                        <p>Year</p>
                                        <p className="movie-card-movie">{movie.Type}</p>
                                    </div>
                                    <div className="movie-card-type">
                                        <p>Type</p>
                                        <p className="movie-card-year">{movie.Year}</p>
                                    </div>
                                </div>
                            </div>
                        </li>
                    )}
                </ul>
            </>
        )
    }
}
