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;