Help with project really stuck

hi im trying to start my own project but running into some difficulty can some one one help im trying to display comments that i have stores in my shared file that in a JSON with properties and im trying to get them to display when i click on the image so any input will be much appreciated im getting an error when i click on image song comment. map is not function

songdetailcomponent

import React from 'react';
import { Card, CardImg, CardBody, CardTitle, CardText } from 'reactstrap';

class SongDetail extends React.Component {
        

    renderSong() {

        const song = this.props.selectedSong;

        if (song != null) {
            return(
                <Card>
                    <CardImg width='100%' src={song.image} alt={song.name} />
                    <CardBody>
                        <CardTitle>{song.name}</CardTitle>
                        <CardText>{song.description}</CardText>
                    </CardBody>
                </Card>
            );
        } else {
            return(
                <div></div>
            );
        }
    }

    renderComments(song) {
        
        
        if (song != null) {
            
            const coms = song.comments.map((com) => {
                
                return (
                    <ul key={com.id} className='list-unstyled'>
                        <li>
                            {com.comment}
                        </li>
                        <li>
                            -- {com.author}, { }
                            {
                                new Intl.DateTimeFormat('en-US', {
                                    month: 'short', day: '2-digit', year: 'numeric' 
                                }).format(new Date(com.date))
                            }
                        </li>
                    </ul>
                );
            });
            
            return (
                <div className='p-3'>
                    <h4>Comments</h4>
                    {coms}
                </div>
            );


        } else {
            return (
                <div></div>
            );
        }
    }

    render() {
        return(
            <div className='row'>
                <div className='col-12 col-md-5 m-1'>
                    {this.renderSong()}
                </div>
                <div className='col-12 col-md-5 m-1'>
                    {this.renderComments(this.props.selectedSong)}
                </div>
            </div>
        );
    }
}


export default SongDetail;

musiccomponent

import { Card, CardImg, CardImgOverlay, CardBody, CardTitle, CardText } from 'reactstrap';
import SongDetail from './SongDetailComponent';

class Music extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            // the state will store properties that we can use in the render
            selectedSong: null
        }
        console.log('Music Component constructor is invoked');
    }

    componentDidMount() {
        console.log('Music ComponentDidMount is invoked');
    }

    onSongSelect(song) {
        this.setState({ selectedSong: song });
    }

    /*renderSong(song) {
        if (song != null) {
            return(
                <Card>
                    <CardImg width="100" src={song.image} alt={song.name} />
                    <CardBody>
                        <CardTitle>{song.name}</CardTitle>
                        <CardText>{song.description}</CardText>
                    </CardBody> 
                </Card>
            );
        }
        else {
            return(
                <div></div>  
            );
        }
    }*/


    render() {

        const music = this.props.songs.map((song) => {
            return (
                <div key={song.id} className="col-12 col-md-5 m-1">
                    <Card onClick={() => this.onSongSelect(song)}>
                        <CardImg width="100" src={song.image} alt={song.name} />
                        <CardImgOverlay>
                            <CardTitle>{song.name}</CardTitle>
                        </CardImgOverlay>
                    </Card>
                </div>
            );
        });

        console.log('Music Component render is invoked')

        return(
            <div className="container">
                <div className="row">
                    {music}
                </div>
                <div className="row">
                <SongDetail selectedSong={this.state.selectedSong} />
                </div>
            </div>
        );
    }
}

export default Music;

app.js

import React from 'react';
import { Navbar, NavbarBrand } from 'reactstrap';
import Music from './components/MusicMenuComponent';
import SongDetail from './components/SongDetailComponent';
import './App.css';
import { SONGS } from './shared/songs';


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      songs: SONGS,
      comments: SONGS
    };
  }

  render(){
    return(
      <div className="App">
        <Navbar dark color="primary">
          <div className="container">
            <NavbarBrand href="/">My Music Jamming</NavbarBrand>
          </div>
        </Navbar>
        <Music songs={this.state.songs} />
        <SongDetail song={this.state.songs} />
      </div>
    );
  }
}

export default App;

This is the line that seems to be raising the error, so it means that song.comments has a chance of being undefined or not an array. You didn’t provide a sample of the JSON that you’re working with, so I’m going to assume you’re going down the right path with the data. You have a conditional to make sure song isn’t null so maybe you can add some additional checks to make sure that song.comments is defined and if it’s an array (even if it’s empty). That will prevent attempting to call map() on something that isn’t an array.

hi thanks for the reply but im still stuck not sure what im doing wrong

my json

export const SONGS = [
    {
        id: 0,
        name: "Spotifiy",
        image: "assets/images/beats_full.jpg",
        category: "My Jamming",
        label: "Music",
        description: "Jamming Music Provides The Best For Musin In One Place...!",
        comments: {
            id: 0,
            rating: 5,
            comment: "This is a test",
            author: "jess",
            date: "2012-12-20"
        }
    },
    {
        id: 1,
        name: "You Tube",
        image: "assets/images/jamming3.jpg",
        category: "Jamming Nights",
        label: "Music",
        description: "Jamming Nights Brings The Night In You",
        comments: {
            id: 0,
            rating: 5,
            comment: "This is a test",
            author: "jess",
            date: "2012-12-20"
        }
    },
    {
        id: 2,
        name: "FaceBook",
        image: "assets/images/jamming.jpg",
        category: "Jamming",
        label: "Jamming",
        description: "Lets Jam 247 Hours A Day",
        comments: {
            id: 0,
            rating: 5,
            comment: "This is a test",
            author: "jess",
            date: "2012-12-20"
        }
    },
    {
        id: 3,
        name: "Twitter",
        image: "assets/images/jamming2.jpg",
        category: "Jamming All Time",
        label: "Jamming 247",
        description: "Lets Jam Till The Night Rocks",
        comments: {
            id: 0,
            rating: 5,
            comment: "This is a test",
            author: "jess",
            date: "2012-12-20"
        }
    }
];

So your comments are not an array. .map() is for arrays.

You will need to go back and review how you’re handling the data

hi thanks managed to resolve the issue