Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import logo from './logo.svg';
- class App extends Component {
- state = {
- movies: [
- {"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"]}
- ]
- }
- render() {
- const { movies } = this.state;
- return (
- <div>
- <div style={{ display:'grid', gridTemplateColumns:'repeat(16, 1fr)' }}>
- <div style={{ gridColumn: '4 / span 10', display: 'grid', gridTemplateColumns: 'repeat(3,minmax(200px, 1fr))', gridGap: '10px 10px'}}>
- {movies && movies.map((movie, index) => (
- <div style={{height: '300px', backgroundColor: '#ccc', border: '1px solid #D3D3D3', borderRadius: 3,
- display: 'grid', gridTemplateRows: '30px 40px 100px'}}>
- <div style={{ fontSize:16 }}>
- {movie.title}
- </div>
- <div>
- {movie.genres.map(genres => genres + " ")}
- </div>
- <div>
- Cast
- <div>
- {movie.cast.map(actor => actor + " ")}
- </div>
- </div>
- <div style={{ justifySelf:'center' }}> <img style={{ width: 180, height: 120}} src="https://upload.wikimedia.org/wikipedia/en/2/27/American_Animals.png" /> </div>
- </div>
- ))}
- </div>
- </div>
- </div>
- );
- }
- }
- export default App;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement