SHARE
TWEET

children

yogasmara May 27th, 2020 898 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react';
  2.  
  3. class DataCard extends Component {
  4.  
  5.   render() {
  6.     let movieData = this.props.movieSingle;
  7.     const genresItems = movieData["genres"].map((genre) =>
  8.       <span>{genre.name}</span>
  9.     );
  10.  
  11.     return (
  12.       <div className="container mt-3">
  13.         <div className="card">
  14.           <div className="card-body">
  15.             <div className="row">
  16.               <div className="col-sm-4">
  17.                 <img src="https://via.placeholder.com/150" className="card-img-top" alt="placeholder goes here" />  
  18.               </div>
  19.               <div className="col-sm-8">
  20.                 <h3>{movieData.title}</h3>
  21.                 <p className="lead">{movieData.tagline}</p>
  22.                 <p className="text-muted">
  23.                   {
  24.                     genresItems
  25.                   }
  26.                 </p>
  27.                 <hr />
  28.                 <h5>Overview</h5>
  29.                 <p>{movieData.overview}</p>
  30.                 <div className="row">
  31.                   <div className="col-sm-3">
  32.                     <div className="card text-center">
  33.                       <div className="card-header">
  34.                         Rating
  35.                       </div>
  36.                       <div className="card-body">
  37.                         <div className="card-subtitle">
  38.                           {movieData.vote_average}
  39.                         </div>
  40.                       </div>
  41.                     </div>
  42.                   </div>
  43.                   <div className="col-sm-3">
  44.                     <div className="card text-center">
  45.                       <div className="card-header">
  46.                         Popularity
  47.                       </div>
  48.                       <div className="card-body">
  49.                         <div className="card-subtitle">
  50.                           {movieData.popularity}
  51.                         </div>
  52.                       </div>
  53.                     </div>
  54.                   </div>
  55.                   <div className="col-sm-3">
  56.                     <div className="card text-center">
  57.                       <div className="card-header">
  58.                         Release
  59.                       </div>
  60.                       <div className="card-body">
  61.                         <div className="card-subtitle">
  62.                           {movieData.release_date}
  63.                         </div>
  64.                       </div>
  65.                     </div>
  66.                   </div>
  67.                 </div>
  68.               </div>
  69.             </div>
  70.           </div>
  71.         </div>
  72.       </div>
  73.     )
  74.   }
  75. }
  76.  
  77. export default DataCard;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Top