Estou tentando mostrar o os atributos do objeto música dentro de um componente mas ele só renderiza a lista mas não os atributos do objeto que eu passei. O que estou fazendo errado?
Objeto Musica:
function Music (banda, url, musica) {
this.banda = banda;
this.url = url;
this.musica = musica;
}
Componente pra mostrar a música:
class Musica extends React.Component {
render() {
return (
<li>
<strong>{this.props.banda} </strong>
<a href={this.props.url} target="_blank"> {this.props.musica} </a>
</li>
)
}
}
Componente para montar a lista com as músicas:
const music1 = new Music("Foster the people", "https://www.youtube.com/watch?v=_GMQLjzVGfw", "Houdini")
const music2 = new Music("The Strokes", "https://www.youtube.com/watch?v=pT68FS3YbQ4", "You Only Live Once")
class Musicas extends React.Component {
render () {
return (
<div>
<ul>
<Musica props={music1}/>
<Musica props={music2}/>
</ul>
</div>
);
}
}