Having trouble aligning all the movie posters in a single line? It appears that your overflow-x and flex-wrap properties aren't functioning as expected in your App.css. Here's a snippet of your App.css:
body {
background: #141414;
color: #ffffff;
}
.movie-app .row {
overflow-x: auto;
flex-wrap: nowrap;
/* Prevents wrapping on the next line */
}
Here's a glimpse at your App.js:
import React, { useState } from 'react';
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import MovieList from "./components/MovieList";
function App() {
const [movies, setMovies] = useState([{
"Title": "Star Wars: Episode IV - A New Hope",
"Year": "1977",
"imdbID": "tt0076759",
"Type": "movie",
"Poster": "https://m.media-amazon.com/images/M/MV5BNzVlY2MwMjktM2E4OS00Y2Y3LWE3ZjctYzhkZGM3YzA1ZWM2XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg"
},
// Remaining movie objects...
])
return (
<div className="container-fluid movie-app">
<div className="row">
<MovieList movies={movies} />
</div>
</div>
)
}
export default App;
Lastly, don't forget about your MovieList.js file:
import React from 'react';
const MovieList = (props) => {
return (
<div>
{
props.movies.map((movie, index) =>
<div>
<img src={movie.Poster} alt="movie" />
</div>
)
}
</div>
)
}
export default MovieList;