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