Advertisement
Guest User

Untitled

a guest
Dec 16th, 2018
188
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.10 KB | None | 0 0
  1. import React, { Component } from 'react';
  2. import logo from './logo.svg';
  3. class App extends Component {
  4. state = {
  5. movies: [
  6. {"title":"American Animals","year":2018,"cast":["Evan Peters","Barry Keoghan","Blake Jenner","Jared Abrahamson","Udo Kier","Ann Dowd"],"genres":["Crime","Drama"]},{"title":"Social Animals","year":2018,"cast":["Noël Wells","Josh Radnor","Aya Cash","Carly Chaikin","Fortune Feimster","Samira Wiley"],"genres":["Comedy"]},{"title":"Ocean's 8","year":2018,"cast":["Sandra Bullock","Cate Blanchett","Anne Hathaway","Mindy Kaling","Sarah Paulson","Awkwafina","Rihanna","Helena Bonham Carter"],"genres":["Action","Comedy"]},{"title":"Won't You Be My Neighbor?","year":2018,"cast":["Fred Rogers"],"genres":["Documentary"]},{"title":"Hereditary","year":2018,"cast":["Toni Collette","Alex Wolff","Milly Shapiro","Ann Dowd","Gabriel Byrne"],"genres":["Horror"]}
  7. ]
  8. }
  9. render() {
  10. const { movies } = this.state;
  11. return (
  12. <div>
  13. <div style={{ display:'grid', gridTemplateColumns:'repeat(16, 1fr)' }}>
  14. <div style={{ gridColumn: '4 / span 10', display: 'grid', gridTemplateColumns: 'repeat(3,minmax(200px, 1fr))', gridGap: '10px 10px'}}>
  15. {movies && movies.map((movie, index) => (
  16. <div style={{height: '300px', backgroundColor: '#ccc', border: '1px solid #D3D3D3', borderRadius: 3,
  17. display: 'grid', gridTemplateRows: '30px 40px 100px'}}>
  18. <div style={{ fontSize:16 }}>
  19. {movie.title}
  20. </div>
  21. <div>
  22. {movie.genres.map(genres => genres + " ")}
  23. </div>
  24. <div>
  25. Cast
  26. <div>
  27. {movie.cast.map(actor => actor + " ")}
  28. </div>
  29. </div>
  30. <div style={{ justifySelf:'center' }}> <img style={{ width: 180, height: 120}} src="https://upload.wikimedia.org/wikipedia/en/2/27/American_Animals.png" /> </div>
  31. </div>
  32. ))}
  33. </div>
  34. </div>
  35. </div>
  36. );
  37. }
  38. }
  39.  
  40. export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement