Complete github link -: https://github.com/dhruv354/movie-app.git
My App.js
In App.js i am using Map function to iterate over data file which is a array of objects and passing each object as a prop to Moviecard but it is showing empty
import './App.css' import React from 'react' import Navbar from './Navbar' import MovieCard from './MovieCard' import data from './data' function App() { return ( <div className="App"> <Navbar /> <div className='main'> <div className='tabs'> <div className='tab'>Movies</div> <div className ='tab'>Favourites</div> </div> <div className='movie-list'> {data.map((movie) => { <MovieCard movie = {movie} /> return '' })} </div> </div> </div> ); } export default App;
My MovieCard.js
In Moviecard i am receving movie object as a prop , i tried console logging but it is showing empty
import React from 'react'; import './MovieCard.css'; function MovieCard(props){ console.log(props) const movie = props.movie return ( // <div className='movie-card-container'> <div className='movie-card'> <div className='left'> <img alt='movie-poster' src= {movie.Poster} /> </div> <div className='right'> <div className='title'>{movie.Title}</div> <div className='plot'>{movie.Plot}</div> <div className='footer'> <div className='rating'>{movie.Imdb}</div> <button className='favourite-btn'>Favourite</button> </div> </div> </div> // </div> ); } export default MovieCard;
my Data.js
this is a array of objects which is having information about a Movie like Plot, title, imdb and its Poster
const data = [ { Plot: 'It is 1941 and the world is in the throes of war. Steve Rogers (Chris Evans) wants to do his part and join Americas armed forces, but the military rejects him because of his small stature', Poster: 'https://i.pinimg.com/564x/ae/90/e7/ae90e774ef756936e18dfb287b28dd64.jpg', Imdb: 6.9, Title: 'Captain America' }, { Plot: 'A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.', Poster: 'https://flxt.tmsimg.com/assets/p7825626_p_v10_af.jpg', Imdb: 8.8, Title: 'Inception' } ] export default data;
Please help
Advertisement
Answer
Well inside your map
function you are returning an empty string each time:
{data.map((movie) => { <MovieCard movie = {movie} /> return '' })}
U should return the JSX
instead:
{data.map((movie) => <MovieCard movie = {movie} /> )}