Functional component is not being rendered

Question

I am trying to display the songs but for some reason my songs component is not even being executed. The console.log statement inside the Songs component is also not being logged to console. Also no errors of any sort are detected at all.

Here is my body component from which I am calling the Songs component

import './body.css'
import React from 'react'
import Header from './Header'
import { useStateValue } from './StateProvider';
import FavoriteIcon from '@material-ui/icons/Favorite';
import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
import Songs from './Songs.js'

function Body( {spotify}) {
    const [{recently_played},dispatch] = useStateValue();
    return (
        <div className="body">
           <Header spotify={spotify}   />

           <div className="body__info">
               <img src={recently_played?.images[0].url} alt=""/>
               <div className="body__infotext">
                   <strong>PLAYLIST</strong>
                    <h2>On Repeat</h2>
                    <p>{recently_played?.description}</p>
               </div>
           </div>
           <div className="body__songs">
               <div className="body__icons">
                   <PlayCircleFilledIcon className="body__shuffle"/>
                   <FavoriteIcon fontSize="large"/>
                   <MoreHorizIcon />
               </div>

               {recently_played?.tracks.items.map(item=>{
                   
                   <Songs track={item.track} />
                  
               })}
           </div>

        </div>
    )
}

export default Body

Here is the Songs component

import React from "react";
import './SongRow.css'

function Songs({ track }) {
  console.log(track);
  return (
    <div className="songRow" >
      <img className="songRow__album" src={track.album.images[0].url} alt="" />
      <div className="songRow__info">
        <h1>{track.name}</h1>
        <p>
          {track.artists.map((artist) => artist.name).join(", ")} -{" "}
          {track.album.name}
        </p>
      </div>
    </div>
  );
}

export default Songs;

Answer 1

You are not returning anything inside the map

   {recently_played?.tracks.items.map(item => {
          return <Songs track={item.track} />;
       })}

 

[or] use the shorthand version of arrow function

   {recently_played?.tracks.items.map(item => <Songs track={item.track} />)}