.map not working on array of objects in react [duplicate]

Question

I have the following code:

const displayData = (data) => {
    console.log(data);// this shows an array of objects
    if (!data.length) return null;
    
    return data.map((movie, index)=>{
       <div key={index} className="movie-display" >
            <h2>{movie.Title}</h2>
            <p>{movie.Year}</p>
        </div>
    })
}
return (
    <div className="search">
        <form >
            <input
                type="text"
                placeholder="Enter details here"
                onChange={(event) => setSearchTerm(event.target.value)}
            />
            <button type="button" onClick={() => fetchData()}>Search</button>
        </form>
        <div className="movies-list">
            {displayData(data)}
        </div>
    </div>
 );

}

And can't get data.map to work This is what that commented console.log shows in console:

Answer 1

Your syntax is off. You’re not returning anything inside the map function.

Answer 2

You're not returning anything from the map() lambda. You should return the JSX from your map callback as follows:

return data.map((movie, index) => {
  return <div key={index} className="movie-display">
           <h2>{movie.Title}</h2>
           <p>{movie.Year}</p>
         </div>;
});