我正在将一个道具从 App.js 传递给 MovieCard.js，但传递的道具显示为空

Question

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

Answer 1

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} /> )}