Problem in rendering API file using map and list in react

I am not able to render movies API(data file) in react when I am trying to do so using map . I have passed data in MovieCard Component.

No error is reported.

I even checked console.log(i) and its prints all the data of movies in the console perfectly but is not rendering it. Please Help.

Warning in console: Line 18:13: Array.prototype.map() expects a return value from arrow function array-callback-return

//Line 18:13
<div className="list">    
 {data.map(i=>{

<MovieCard movie={i}/>


 })}

//Also replaced data.map with data.forEach but still no progress.

//App component

import React from "react";
import{data} from '../data'
import Navbar from './Navbar'
import MovieCard from './MovieCard'

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="list">    
 {data.map(i=>{
  
<MovieCard movie={i}/>


 })}

</div>

</div>
</div>

);
}

export default App;

//MoviCard Component
import React, { Component } from 'react'


export class MovieCard extends Component 
{
    render() {

        const {movie} = this.props;
        return (
            <div className="movie-card">
            <div className="left">

                <img alt="movie-poster" src={movie.Poster}/>
            </div>
    
          <div className="right">
           <div className = "title"> {movie.Title} ({movie.Year})</div>
           <div className = "plot">{movie.Plot}</div>
           <div className = "footer">
           <div className = "rating">{movie.imdbRating}</div>
           <button className="favorite-btn">Favourite</button>
          </div>
            </div>

            </div>
        )
    }
}

export default MovieCard;

>Solution :

The problem is exactly what you reported:

Array.prototype.map() expects a return value from arrow function

The function you’re passing to .map doesn’t return anything:

data.map(i=>{
  <MovieCard movie={i}/>
})

You can explicitly return:

data.map(i=>{
  return <MovieCard movie={i}/>
})

Or simplify by not wrapping the function block in curly braces, but instead just use parentheses and rely on the implicit return for single-line arrow functions:

data.map(i=>(
  <MovieCard movie={i}/>
))

As an aside, in React you’ll also want rendered lists like this to have a key attribute. If i has a unique ID then you can use that. For example:

data.map(i=>(
  <MovieCard key={i.id} movie={i}/>
))

Otherwise you can rely on the second argument passed to the .map callback function, which is just an index:

data.map((i,x)=>(
  <MovieCard key={x} movie={i}/>
))