Problem in rendering API file using map and list in react-CodePudding

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;

CodePudding user response：

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

CodePudding user response：

The warning provides you with all the information you need:

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

Your arrow function is not returning a value

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

Either you remove the {}:

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

or you add a return statement:

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

You'll also want to add a key: <MovieCard key={i.some_unique_identifier} movie={i}/>

CodePudding user response：

While you are doing map, you need to return it from inside.

Correct here:

//Line 18:13
<div className="list">    
 {data.map(i=>{
    return <MovieCard movie={i}/>
 })}

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

CodePudding user response：

You are missing the return statement, map recibes a function but needs to return some value. Can be like this:

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

Or like this:

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

CodePudding user response：

Try this.

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

data.map function converts one array (data in your case) to a new array. The conversion (mapping) is defined by the argument of data.map, also called the callback function. The callback function of data.map must return a value. By returning a value for each item of the array is how data.map defines the mapping.